我看过有关严格模式更改图像填充的帖子,但我遇到了不同的问题。我试图让文本在图像周围浮动。这在 FF 11 中有效(垂直位置有一个小的变化,但它不会打扰我)。但在 IE8 中,left-float 有效,right-float 只适用于一个段落。我做了一个最小的测试文件,问题就消失了。最终我发现放一个严格的 DOCTYPE 是导致问题再次出现的原因。(是的,我需要那个 DOCTYPE 来让我的代码通过 W3C 验证器。)
我已经准备了它的外观图片,但我还不允许发布图片。
左浮动图像总是这样出现:
XXXXXXXXXXXXXXX 第一段 XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX 第二段 XXXXXXXXXXXXXXX
我希望右浮动图像作为它的镜像出现,这就是我在没有 DOCTYPE 的 FF 11 和 IE 8 中得到的。
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>