0

画像パディングを変更する厳密モードに関する投稿を見たことがありますが、別の問題があります。テキストを画像の周りに浮かせようとしています。これは FF 11 で機能します (垂直位置に小さな変更がありますが、私は気にしません)。しかし、IE8 では、left-float は機能し、right-float は 1 つの段落に対してのみ機能します。最小限のテスト ファイルを作成したところ、問題は解消されました。最終的に、厳密な DOCTYPE を配置することが問題の再発の原因であることがわかりました。(もちろん、コードを W3C バリデーターに渡すには、その DOCTYPE が必要です。)

見た目の画像は用意していましたが、まだ画像を掲載することはできません。

左フローティング画像は常に次のようになります。

XXXXXXXXXXXXXXX の最初の段落
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX 第 2 段落
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 に答える