ダブルマージンフロートバグに遭遇
なんか、IE6だと余白が広い気がするなーと思ったらバグでした。
「ダブルマージンフロートバグ」と呼ばれるものらしい。名前がつくくらいなので有名なバグなんだろうなー。
詳細はCSS Radar - IE ダブルマージンフロートバグをFixが詳しいです。
対策
「display:inline;」とすると回避できるとのこと。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> div.outer { width: 100px; height:100px; border: 1px solid #aaaaaa; margin: 20px; } div.inner, div.inner2 { float:left; /** フロート要素だと */ margin-left: 10px; /** マージンが2重に適用される */ width: 50px; height: 50px; background-color: #CC3366; } div.inner2 { display: inline; /** displayをinlineにすると回避可能。 */ } </style> </head> <body> <p>■IE6だと左のマージンが20pxになる。</p> <div class="outer"> <div class="inner"></div> </div> <br/> <p>■display:inlineにすると直る。</p> <div class="outer"> <div class="inner2"></div> </div> </body> </html>
