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