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。

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

<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，您可以使用*添加样式。它只适用于

Answer 3

更改适用于IE的文档类型

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

Answer 4

IE＆lt; 8无法将block默认的元素切换为inline-block元素。无论您如何努力，除非您使用block IIRC，否则它们将始终保持float。

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

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

为什么在Internet Explorer 8中无法正确显示内联块元素？

5 个答案: