IE显示内联块

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为什么不在IE中工作

Answer 1

旧版本的IE不了解inline-block块级元素.

inline-block为内联元素工作的原因是因为它们是这样做的,所以它触发了hasLayout.而具有布局内联元素的作品正是像inline-block.

因此,要inline-block使用块级元素,使它们内联并以某种方式触发hasLayout,例如,使用zoom: 1.

因此,对于您的代码,有两种方法:将divs 更改为spans,或添加内联黑客(或将代码移动到外部样式表并使用条件注释).内联黑客的版本如下所示:

<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>

Answer 2

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

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