css - 为什么行内 block 元素在 Internet Explorer 8 中显示不正确？

Question

我有以下代码:

<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>相反，它确实有效；但是，我真的很想知道为什么 <div> s 在 IE 中不起作用。

Answer 1

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

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

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

因此，对于您的代码，有两种方法:将 div 更改为 span，或添加内联 hack(或将代码移至外部样式表并使用条件注释)。带有内联 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>