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與浮動元素

回答

相關問題