IE7与浮动元素

在IE7标准模式渲染，一个奇怪的事情发生与以下机身车身宽度增加：IE7与浮动元素

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

的车身宽度双打，即使<div>宽度看起来是正确的。只有大量空白出现在右侧，还有一个水平滚动条。

页面呈现正确的，如果我要么切换到IE8标准模式渲染，或者如果我留在IE7模式，但除去font-style CSS规则：

<body> 
    <div style="border: 1px solid black;"> 
    <span style="float: right;">some text to the right</span> 
    other text to the left 
    </div> 
</body>

这到底是怎么回事？

PS：有趣的是，如果我使用<em>或<i>而不是font-style: italic，情况也会如此。与<em> - 宽身，没有 - 正常的身体。更改字体样式似乎打破了它，而更改字体粗细（粗体）并没有任何负面影响。

来源

2010-09-11 Tomalak

我不知道究竟发生了什么，但话又说回来，IE的作品以神秘的方式......无论哪种方式，这应该修复它：

<div style="border: 1px solid black; overflow: hidden;">

来源

2010-09-11 15:43:24

声明'溢出：隐藏;'固定它。谢谢。 :) – Tomalak 2010-09-11 15:47:15

很高兴为您服务！ :) – 2010-09-11 15:50:49

IE7与浮动元素

回答

相关问题