相当于 IE8、IE7 和旧版浏览器的 div display inline-block答案

【问题标题】：Equivalent of div display inline-block for IE8, IE7 and older browsers相当于 IE8、IE7 和旧版浏览器的 div display inline-block
【发布时间】：2012-09-16 01:02:12
【问题描述】：

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

在设计的各个方面，我目前正在研究实现我想要的布局和样式（不使用图像）的唯一方法是使用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 像素的色块，用于解释图表中的颜色。

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

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

谢谢

【问题讨论】：

IE8 确实支持display: inline-block。
@BoltClock，确切地说，对于内联元素，请参阅我的答案。
@BoltClock，不。也许对于某些 IE8 版本和某些 DOCTYPE，但通常不会。 Look here。如果可行，为什么所有这些人都会寻找解决方案？ :) 另外，请查看我在回答中引用的文章。请通过链接适当的资源来支持您的主张。
@Tomas：我看不出这有什么“争议”——IE8 完全支持display: inline-block 这是一个众所周知且无可争议的事实。另一个答案是不幸的混淆源的结果，实际上并不是 IE8 的问题——我已经在那里发表了评论。至于来源，我会简单地指向你 MSDN - msdn.microsoft.com/en-us/library/hh781508.aspx#positioning
@BoltClock，我再说一遍，内联块不适用于所有版本的 IE8。你读过post I linked above吗？

标签： html internet-explorer-8 cross-browser css

【解决方案1】：

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

您可以为其他浏览器添加内联块，但对于 IE，您可以使用 *.它只适用于ie

【讨论】：

【解决方案2】：

这是涵盖此主题的好资源：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;

【讨论】：

太棒了。这是我的代码中缺少的 hasLayout 触发器。非常感谢。
没问题。 hasLayout 让我数不胜数。
仅链接的答案永远不是一个好的答案 - 请参阅meta.stackexchange.com/q/8231/166308。把关键信息放在这里。
@Tomas，我添加了一些示例代码和一些附加信息。
好的，这样好多了！ :-) 这将使它比我的答案更通用，我建议使用<span>。但是您上面的代码中究竟是什么触发了 IE 的 hasLayout？

【解决方案3】：

如给定here：

IE 支持 inline-block，但仅适用于原生元素排队。所以，如果你真的想使用 inline-block，你会受到限制到跨度、强项和 ems...

是的，这不合逻辑，因为通常使用 div 或 span 都没有关系...但请记住 - 这是 IE :)

所以只需将<div> 更改为<span> 即可！

【讨论】：

【解决方案4】：

使用此代码

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

【讨论】：