html - 相当于 IE8、IE7 和旧版浏览器的 div 显示内联 block

Question

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

在设计的各个方面，我目前正在研究实现我想要的布局和样式(不求助于使用图像)的唯一方法是使用 display:inline-block css 样式选项。但是，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 像素的色 block ，用于解释图表中的颜色。

更普遍的是，每当我想要对文本正文中的特定文本等进行更好的格式和布局控制时，就会出现此问题。

在我目前正在进行的设计中，无论如何我都会放弃对旧浏览器类型的支持，因为它严重依赖于 Canvas 元素。但是，我认为这是一个很好的问题，因为我之前已经多次遇到过这个问题。

谢谢

Answer 1

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

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

此外，旧版本的 Fire Fox 也不支持 inline-block，但有一个“inline-stack”值 (moz-inline-stack)。

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

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