开发者

IE7 body width increases with floated element

开发者 https://www.devze.com 2023-01-15 13:28 出处:网络
In IE7 standards mode rendering, a strange thing happens with the following body: <body> <div style=\"border: 1px solid black;\">

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;">
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号