CSSでのIE8フロートの問題

Question

私はこれを最初にやったわけではないと確信しているので、これは以前にカバーされたに違いありませんが、答えが見つかりません。繰り返される背景画像を使用して、<div>のシャドウ効果を作成しています。下の2つのコーナーでは、小さな9x5ピクセルの画像を使用しています。私はそれらを左右にフロートし、FirefoxとSafariでは完璧に見えます。 IE8（およびおそらく他のIE）では、約3pxほど左右に浮きすぎています。

こちらで問題を確認できます。私の妻。

これまでのところ、display：inlineを設定してみましたが、これは同様のIE6の問題の修正です。また、画像の余白とパディングを0pxに設定してみましたが、うまくいきませんでした。

アイデアはありますか

ありがとう、 キャライグ

Answer 1

ページを閲覧しているときに、デフォルトでquirksモードになっていることがわかりました。これはおそらく問題です。これをStrictに強制すると、IEのすべてのケースでフローティングの問題が修正されるためです。

ここでppkの記事を読んでください： http://www.quirksmode.org/css/quirksmode.html

彼はその原因とその修正方法を説明しています：）

お役に立てば幸いです！

Answer 2

フロート要素がdivの境界の外に出ていることに関係があると思います。親divを閉じる前にこれを挿入してみてください：

<div style="clear: both; font-size: 1px; line-height: 0px;"> &nbsp;</div>