IE7 body width increases with floated element
In IE7 standards mode rendering, a strange thing happens with the following body:
<body>
<div style="border: 1px solid black;">
<span style="float: right; font-style: italic;">some text to the right</span>
other text to the left
</div>
</body>
The body width doubles, even though the <div> width looks correct. There is just a huge amount of empty space appearing to the 开发者_Python百科right, and a horizontal scrollbar.
Page rendering is correct if I either switch to IE8 standards mode rendering, or if I stay in IE7 mode but remove the font-style CSS rule:
<body>
<div style="border: 1px solid black;">
<span style="float: right;">some text to the right</span>
other text to the left
</div>
</body>
What is going on here?
PS: Interestingly, the same happens if I use <em> or <i> instead of font-style: italic. With <em> — wide body, without — normal body. Changing font style seems to break it, while changing font weight (bold) does not have any negative effect.
I'm not sure exactly what's happening, but then again, IE works in mysterious ways ... Either way, this should fix it:
<div style="border: 1px solid black; overflow: hidden;">
加载中,请稍侯......
精彩评论