0

我看过有关严格模式更改图像填充的帖子,但我遇到了不同的问题。我试图让文本在图像周围浮动。这在 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>
4

1 回答 1

0

你的html结构是错误的......

这是一个更好的方法...

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

于 2012-04-20T01:22:04.647 回答