为什么在 Internet Explorer 8 中不能正确显示 inline-block 元素？答案

【问题标题】：Why are inline-block elements not displayed correctly in Internet Explorer 8?为什么在 Internet Explorer 8 中不能正确显示 inline-block 元素？
【发布时间】：2019-05-30 01:28:17
【问题描述】：

我有以下代码：

<div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;'>
    asdfasdf<br />were
  </div>
</div>

这在 Firefox 和 Chrome 中显示得很好，但在 Internet Explorer 8 中则不然。它们有布局，所以这不是问题，而且宽度足够小，可以放在一行上。

如果我改用<span>s，它确实有效；但是，我真的很想知道为什么<div>s 在 IE 中不起作用。

【问题讨论】：

您的文档是否有 doctype 声明？
“它不起作用”是什么意思？你想要的效果是什么？
啊，好吧，我声明了 HTML 4，因为它是一个非常古老的页面，而不是 XHTML 或 HTML5
HTML5 文档类型在旧版浏览器中会优雅降级。您的示例在 chrome latest 和 ie8 中看起来相同。

标签： css internet-explorer-8

【解决方案1】：

旧版本的 IE 不理解块级元素的 inline-block。

inline-block 用于内联元素的原因是因为它们这样做了，所以它会触发 hasLayout。内联元素的 has 布局完全像inline-block 一样工作。

因此，要使inline-block 与块级元素一起工作，请将它们内联并以某种方式触发hasLayout，例如，使用zoom: 1。

因此，对于您的代码，有两种方法：将 divs 更改为 spans，或添加内联 hack（或将代码移动到外部样式表并使用条件 cmets）。带有内联 hack 的版本如下所示：

<div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />were
  </div>
</div>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

更改文档类型适用于 IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

【讨论】：

【解决方案4】：

IE block 的元素切换为inline-block 元素。不管你怎么努力，除非你使用float IIRC，否则它们将永远保持block。

在您的示例中，您似乎不需要使用<div>。如果是这种情况，为什么不使用<span> 或默认为inline 的元素。否则，floating 就是答案。

【讨论】：

这不是真的。 IE8 可以很好地理解 inline-block 显示模式。但是 IE7 完全不知道这种模式。虽然您可以通过将 display 设置为 inline 并强制该元素的布局（例如，使用 zoom 属性）来模拟 inline-block 行为。
确实如此。 IE8 似乎与inline-block 一起正常工作我将更新我的答案。
IE8 可以很好地与 inline-block 配合使用，直到您开始隐藏/显示 inline-block 内会导致父容器增长或缩小的元素。

【解决方案5】：

试试这个

<style type="text/css">
.one {
  width: 200px; 
  border: 1px solid black;
}
.two {
  display: -moz-inline-box; 
  display: inline-block; 
  width: 70px; 
  border: 1px solid green;
}
* html .two {
  display: inline;
}
* + html .two {
  display: inline;
}
</style>
<div class="one">
  <div class="two">
    asdfasdf<br />asdf
  </div>
  <div class="two">
    asdfasdf<br />were
  </div>
</div>

【讨论】：