背景色和斜體襯托Internet Explorer 7中的bug

下面的代碼演示了我遇到的問題：背景色和斜體襯托Internet Explorer 7中的bug

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

<style> 

p 
{ 
    background-color:#FFF; 
} 


</style> 
</head> 
<body> 

    <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style='float:left;'> 
    <p><em>This is an italic sentence.</em></p> 
    <p><strong>This is a bold sentence.</strong></p> 
    <p>This is a normal sentence.</p> 

</body> 
</html>

當這個代碼在IE7中查看，谷歌標誌將顯示在左側與'白色的橫條「貫穿其中，每一段都顯示在右側。

刪除第一行<em>標記會導致行消失。親自嘗試一下。刪除這三行中的每一行，看看錯誤是如何改變的。

這個世界正在發生什麼？

解決方案：hasLayout問題。將縮放：1屬性添加到em可以糾正問題。

來源

2009-07-27 Ian

不知道爲什麼會發生這種情況，但有很多方法可以確保它不會發生，包括向em添加display：inline-block。

來源

2009-07-27 09:16:36

謝謝，這讓我可以在我的樣式表中修復一次該問題的所有實例，而不是爲所有知道的人添加保證金。 – Ian 2009-07-27 18:06:38

...實際上，這並沒有解決它，因爲現在我所有的時間都在他們自己的路線上開始。解決這個問題的另一種方法是什麼？ – Ian 2009-07-27 19:08:37

這是因爲漂浮的圖像發生。

當圖像浮動時，它在技術上沒有任何自己的佈局。白色條是<p>標籤，因爲在CSS中給了它們一個#FFF的背景。

對於IE7是認爲<p>標籤實際上開始在最左邊的頁面的開始，所以它開始他們那裏，只是顛簸過去浮動圖像的內容，留下有趣的白條凌駕的浮動圖像。

我會嘗試繞過它通過給你的<p>標籤左邊距。如果您留下足夠的左邊距以通過圖像，則不應再獲得這些條形圖。

因此，嘗試像...

p{ background-color: #fff; margin-left: 300px; }

可以調整左邊距，但類似的規定應該擺脫白條給你的。

來源

2009-07-27 13:02:05

背景色和斜體襯托Internet Explorer 7中的bug

回答

相關問題