画像パディングを変更する厳密モードに関する投稿を見たことがありますが、別の問題があります。テキストを画像の周りに浮かせようとしています。これは 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>