相当于div显示IE8,IE7和旧浏览器的内联块

Question

这是一个关于跨浏览器兼容性的相当普遍的问题.

在设计的各个方面,我目前正致力于实现我想要的布局和样式(不使用图像)的唯一方法是使用display:inline-blockcss样式选项.但是,IE8和其他旧浏览器不支持这种情况,这导致我的设计失败.

因此,我的问题1有两个部分 - 是否有一种方法可以实现IE8的类似或等效效果？2 - 如果没有,我如何才能使设计顺利降级？

供您参考,这是一个在我的设计中使用它的例子.

<div style="width:20px; height:20px; display:inline-block; background-color:rgb(200,120,120); margin-right:10px;"></div>Direct

它是一个20x20像素的颜色块,用于解释图表中的颜色.

更普遍的是,每当我想要在文本体内对文本的特定位等进行更大的格式化和布局控制时,就会出现这个问题.

在我正在进行的设计中,我将不再支持旧的浏览器类型,因为它严重依赖于canvas元素.但是,我认为这是一个很好的问题,因为我之前已经多次遇到过这个问题.

谢谢

Answer 1

这是一个很好的资源,涵盖了这个主题:http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

IE基本上有一个名为"hasLayout"的触发器.触发此操作将允许您display:inline-block在块级元素上使用(默认情况下,IE仅允许在本机内联元素上使用内联块).

此外,较旧版本的Fire Fox也不支持内联块,但具有"内联堆栈"值(moz-inline-stack).

据我所知,这是获得跨浏览器的最佳方式display:inline-block:

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;