IE6でmarginが2倍になる対策

Tweet

Pocket

IE8のパブリックベータが公開されていますが、いまだにIE6がIE全体の半数を占めています。

サイト制作の立場から言えば、IE6からのアクセスもまだまだ無視できないですね。

ところがIE6は、CSSの実装に致命的とも思えるバグがあって、表示結果がIE7やFirefoxのそれとは、かなり異なる場合があります。

特に注意したいのがマージンをとったブロック要素をフロートした場合。

IE6では、フロートした側と反対側にマージンを2倍取ってしまうバグがあります。

<style>
.block {
display: block;
float: left;
margin: 5px;
}
</style>

といったCSSを記述した場合に<li class=”block”>～～</li>を2つ並べたとすると、「左側のマージンは、0になり、右端のマージンが10pxになってしまいます。

そこで、IE6では、display:block を display:inline にすることで IE7 や Firefox と同じ表示にします。

<style>
.block {
display: block;
float: left;
margin: 5px;
_display: inline;
}
</style>

2番目に指定している display に _ （アンダースコア、アンバーバー）が付いているのが分かりますでしょうか。

この _display というのは、正確にはCSSの記述としては正しくないのですが、ここもIE6のバグで、「_」のみを無視してそれに続いて記述されているスタイルシートを有効にしてしまうんですね。

IE7 や Firefox の場合は、_で始まる要素は、それ全体を無視するので、上記のスタイルシートの場合、IE7 と Firefox では、display: block。IE6 では、display: inline が適用されます。

IE6 で display: inline にも関わらず height が使えるのもなんだか釈然としないんですが、まあ、実際にブラウザでそうなるんだからよしとします。

他にもIE6に対応させるテクニックは、さまざまなサイトで検証されています。
例えば、ブラウザ毎に読み込ませるスタイルシートを替えたりするのが王道でしょうか。

<link rel=”stylesheet” type=”text/css” href=”style.css” />
<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>

上記の記述では、IEのバージョンが「7未満の場合」に ie6.css を読み込むようになります。

他の IE7 や Firefox の場合、<!–[if lt IE 7]>から<![endif]–>までがコメントとして無視されます。

サイト全体を IE7 と Firefox の環境でコーディングし終えた後で、IE6でチェックして、おかしい部分を ie6.css でスタイルシートを上書きするというやり方。