IE显示内联块 [英] IE display inline block

问题描述

所以我这样做。

<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它不。他们有布局，这不是问题，宽度足够小，所以它适合在一行。

Now in firefox and chrome it displays just fine but in internet explorer 8 it does not. They have layout so that isn't the problem, and the widths are small enough so it fits on one line.

如果我使用span，而不是工作，但是真的想知道为什么div不在IE中工作

If I use span's instead it does work, however I would really like to konw why div's dont' work in IE

推荐答案

旧版本的IE不了解 inline-block 用于块级元素。

The old versions of IE don't understand the inline-block for block-level elements.

inline-block 适用于内联元素是因为它们触发 hasLayout 。并且内联元素的布局可以像 inline-block 一样精确地工作。

The reason why inline-block works for inline elements is because they did it so it triggers hasLayout. And the has layout for inline elements works exactly like an inline-block.

因此，为了使 inline-block 使用块级元素，使它们内联，并以某种方式触发 hasLayout ，使用 zoom：1 。

So, to make inline-block work with block-level elements, make them inline and somehow trigger the hasLayout, like, using zoom: 1.

因此，对于你的代码，有两种方法：change div s到 span s，或者添加内联hack（或将代码移动到外部样式表并使用条件注释）。具有内联黑客的版本将如下所示：

So, for you code, there are two ways: change divs to spans, or add inline hacks (or move the code to external stylesheets and use conditional comments). The version with inline hacks would look like this:

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

这篇关于IE显示内联块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！