CSS 为什么内联块元素在 Internet Explorer 8 中无法正确显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6703017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why are inline-block elements not displayed correctly in Internet Explorer 8?
提问by csteifel
I have the following code:
我有以下代码：
<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>
This displays just fine in Firefox and Chrome, but in Internet Explorer 8, it does not. They have layout, so that isn't the problem, and the widths are small enough that it fits on one line.
这在 Firefox 和 Chrome 中显示得很好，但在 Internet Explorer 8 中则不然。它们有布局，所以这不是问题，而且宽度足够小，可以放在一条线上。
If I use <span>s instead, it does work; however, I would really like to know why <div>s don't work in IE.
如果我改用<span>s，它确实有效；但是，我真的很想知道为什么<div>s 在 IE 中不起作用。
回答by kizu
The old versions of IE don't understand the inline-blockfor block-level elements.
旧版本的 IE 不理解inline-blockfor 块级元素。
The reason why inline-blockworks for inline elements is because they did it so it triggers hasLayout. And the has layout for inline elements works exactlylike an inline-block.
inline-block对内联元素起作用的原因是因为他们这样做了，所以它会触发hasLayout. 而具有布局内联元素的作品正是像inline-block。
So, to make inline-blockwork with block-level elements, make them inline and somehow trigger the hasLayout, like, using zoom: 1.
因此，为了inline-block与块级元素的工作，让他们在线并以某种方式触发hasLayout一样，使用zoom: 1。
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:
因此，对于您的代码，有两种方法：将divs更改为spans，或添加内联 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>
回答by GeniusJRS
display: inline-block;
*zoom: 1;
*display: inline;
display: inline-block;
*zoom: 1;
*display: inline;
you can add inline-block for other browser but for IE you can add style with *. it only works in ie
您可以为其他浏览器添加内联块，但对于 IE，您可以添加带有 *. 它只适用于 ie
回答by user2792101
Changing the doc type worked for IE
更改适用于 IE 的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
回答by Hux
IE < 8 cannot switch elements that are blockby default to inline-blockelements. No matter how hard you try, they will always remain blockunless you use floatIIRC.
IE < 8 无法将block默认inline-block元素切换为元素。无论您多么努力，block除非您使用floatIIRC，否则它们将始终存在。
In your example it seems that you do not need to use a <div>. If this is the case, why not use a <span>or an element that is inlineby default. Otherwise, floatingis the answer.
在您的示例中，您似乎不需要使用<div>. 如果是这种情况，为什么不使用 a<span>或inline默认情况下的元素。否则， floating就是答案。
回答by yunzen
Try this
尝试这个
<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>
