嚴格模式導致右浮動圖像在IE8上的工作方式不同於左浮動

我已經看到有關嚴格模式更改圖像填充的帖子，但我遇到了另一個問題。我試圖讓文字在圖像周圍浮動。這在FF 11中有效（垂直位置有一點變化，但它不會影響我）。但在IE8中，左浮動工作和右浮動僅適用於一個段落。我做了一個最小的測試文件，問題就消失了。最終我發現把一個嚴格的DOCTYPE放在那裏是導致問題重新出現的原因。（是的，我需要該DOCTYPE才能讓我的代碼通過W3C驗證程序。）嚴格模式導致右浮動圖像在IE8上的工作方式不同於左浮動

我準備好了它的外觀圖像，但我不允許發佈圖像。

左邊的浮動圖像永遠是這樣的：

 
XXXXXXXXXXXXXX first paragraph 
XXXXXXXXXXXXXX 
XXXXXXXXXXXXXX second paragraph 
XXXXXXXXXXXXXX

我想向右浮動的圖像出來作爲一個鏡像，這就是我得到了FF 11和IE 8沒有DOCTYPE。

       first paragraph XXXXXXXXXXXXXX 
               XXXXXXXXXXXXXX 
           second paragraph XXXXXXXXXXXXXX 
               XXXXXXXXXXXXXX

但是，當我把在DOCTYPE，IE8將更改到

       first paragraph XXXXXXXXXXXXXX 
               XXXXXXXXXXXXXX 
               XXXXXXXXXXXXXX 
               XXXXXXXXXXXXXX 
               second paragraph

這裏的HTML

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML+RDFa 1.0//EN' 
     'http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd'> 
<html xmlns='http://www.w3.org/1999/xhtml' 
     xmlns:v='http://rdf.data-vocabulary.org/#' 
     xmlns:fb='http://www.facebook.com/2008/fbml' 
     xmlns:og='http://opengraphprotocol.org/schema/'> 
    <head> 
    <title>float test - strict</title> 
    <style> 
     img { margin: 0 10px; } 
     img.fl { float:left; } 
     img.fr { float:right; } 
    </style> 
    </head> 
    <body> 
    <p dir='rtl'> 
     <img class='fr' src='http://www.htmlgoodies.com/images/blue.gif' 
     height='100' alt='img'/> 
     first paragraph 
    </p> 
    <p dir='rtl'> 
     second paragraph 
    </p> 
    <div style='clear:both;'></div> 
    <p dir='ltr'> 
     <img class='fl' src='http://www.htmlgoodies.com/images/blue.gif' 
     height='100' alt='img'/> 
     first paragraph 
    </p> 
    <p dir='ltr'> 
     second paragraph 
    </p> 
    </body> 
</html>

來源

2012-04-19 WarrenBurstein

你的HTML結構是錯誤的。 ..

這是一個更好的辦法...

http://jsfiddle.net/VH7QC/1/

來源

2012-04-20 01:22:04 Maxpower

謝謝，現在好多了。但IE8上的左右版本仍然存在差異，但FF11上沒有左側版本，左側版本包裝在段落底部下方，但右側版本僅在FF上顯示，而不是IE瀏覽器。請參閱[鏈接] http://jsfiddle.net/VH7QC/2/ [/ link]，所有我改變的是第二段中較長的文字。 – WarrenBurstein 2012-04-20 13:06:14

我決定在IE Netrenderer上檢查一下http://netrenderer.com，IE9和IE8做同樣的事情（包裝在左邊的底部，而不是在右邊），IE7包裝在IE6和5.5上，雙方都沒有。 – WarrenBurstein 2012-04-20 15:14:05

使用CSS重置... Eric Meyer重置CSS http://www.cssblog.es/10-tecnicas-para-resetear-css/ – Maxpower 2012-04-20 19:18:19

嚴格模式導致右浮動圖像在IE8上的工作方式不同於左浮動

回答

相關問題