Why are inline-block elements not displayed correctly in Internet Explorer 8?
I have the following code:
<div style='width: 200px; border: 1px solid black;'>
<div style='display: inline-block; width: 70px; border: 1px solid green;'>
开发者_JS百科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.
If I use <span>s instead, it does work; however, I would really like to know why <div>s don't work in IE.
The old versions of IE don't understand the inline-block for block-level elements.
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.
So, to make inline-block work with block-level elements, make them inline and somehow trigger the hasLayout, like, using 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:
<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>
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
Changing the doc type worked for IE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
IE < 8 cannot switch elements that are block by default to inline-block elements. No matter how hard you try, they will always remain block unless you use float IIRC.
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 inline by default. Otherwise, floating is the answer.
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>
加载中,请稍侯......
精彩评论