IE8、IE7及更早版本浏览器中类似于div display inline-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>直接

这是一个20x20像素的彩色块，用于解释图表中的颜色。

更普遍地说，每当我想要在文本主体内对特定文本等进行更大的格式和布局控制时，就会出现此问题。

在我目前正在开发的设计中，由于它严重依赖canvas元素，我将放弃对旧浏览器类型的支持。但是，我认为这是一个好问题，因为我以前遇到过这个问题。

谢谢

- user1694691

---

IE8支持display: inline-block。 - BoltClock

@BoltClock，没错，对于内联元素，请参见我的答案。 - Tomas

@BoltClock，不是的。也许对于某些IE8版本和某些DOCTYPEs，但一般情况下不行。看这里。如果它能正常工作，为什么所有这些人都要寻找解决方案呢？ :) 此外，请查看我在答案中引用的文章。请通过链接适当的资源支持您的声明。 - Tomas

@Tomas：我不明白这些内容中有什么“有争议的”——众所周知，IE8完全支持display:inline-block。另一个答案是由于混淆而产生的不幸结果，并不是IE8的问题——我已经在那里发表了评论。至于来源，我只想指向MSDN——http://msdn.microsoft.com/en-us/library/hh781508.aspx#positioning - BoltClock

@BoltClock，我再次重申inline-block在IE8的所有版本上都不起作用。你有没有阅读我上面链接的帖子？（https://dev59.com/kGox5IYBdhLWcg3wl1P4#9369621） - Tomas

Answer 1

这里有一个涵盖该主题的好资源：http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ 基本上，IE有一个叫做“hasLayout”的触发器。触发它将允许您在块级元素上使用display:inline-block（默认情况下，IE仅允许在本机内联元素中使用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;

- Joel Kinzel

---

太棒了。我的代码中缺少了hasLayout触发器。非常感谢。 - user1694691

@Tomas，我添加了一些示例代码和一些额外的信息。 - Joel Kinzel

好的，这样会更好！ :-) 这将使它比我的答案更通用，我建议使用 <span>。但是，你上面的代码中到底是什么触发了IE的hasLayout？ - Tomas

zoom:1 将会在 IE6/7 中触发它。任何不同于 zoom:normal 的值也将会触发它。还有其他触发方式，但是 zoom:1 是我见过最常用的。这里有更多关于 IE 中 hasLayout 触发器和属性的信息：http://satzansatz.de/cssd/onhavinglayout.html - Joel Kinzel

看起来IE8不支持星号(*) hack。 - Ricky Jiao

Answer 2

根据这里所述：

IE支持inline-block，但仅适用于本质上是内联的元素。因此，如果你确实想要使用inline-block，你只能使用span、strong和em元素...

是的，这种做法并不合乎逻辑，因为通常使用div或span都无所谓... 但请记住 - 这是IE :)

所以，只需将<div>更改为<span>就可以了！

- Tomas

Answer 3

请使用这段代码。

*display: inline;
*vertical-align: middle;

- Web Designer cum Promoter

Answer 4

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

你可以为其他浏览器添加inline-block，但是对于IE，你可以使用*添加样式。这只在IE中有效。

- GeniusJRS