てんぽ: IE6のCSSバグを視覚的にチェック

IE用Acidテストとも言えるCSSバグのチェックページを作ってみました。 IE6で表示するとすべてのチェック項目で「NG」と表示されますが、正しい表示を行うブラウザなら「OK」と表示されるはずです。

• IEtest (beta)

具体的にはどうやっているかというと、たとえば「position: absoluteが指定されたボックスの幅をパーセントで指定したとき、 幅の参照先を、そのボックスの包含ブロックではなく、間近の親要素にしてしまうバグ」をチェックするコードは以下のようになっています。

<div class="container">
　<div class="div1">
　　<div class="div2"></div>
　</div>
</div>

.container {
 width:100px;
 position:relative;
}

div1 {
 width:50px;
}

.div2 {
 width:100%;
 position:absolute;
 background: url(white.png) right no-repeat;
}

div2の幅は、width: 100%＝その包含ブロックの幅です。 div2にはposition: absoluteが指定されているので、その包含ブロックは祖先要素のうち最も近いpositionの値がstaticでないもの、すなわちcontainerとなります。 したがってwidth: 100%＝100pxです。しかし、IE6はdiv1を包含ブロックと見なすのか、div2の幅を50pxとしてしまいます。

さてここで、containerには幅100pxの背景画像が指定されており、左側半分にOK、右側半分にNGと描かれています。 さらにdiv2は50pxの真っ白な背景画像を右端に表示するようになっています。 つまり、IE6では50pxのdiv2は全面が白い画像で敷き詰められ、containerの左半分のOKの文字を隠しますが、 正しい表示を行うブラウザでは100pxのdiv2の右側半分の白背景がNGの文字を隠すわけです（OKは隠れない）。

このようにIE6特有のバグを利用して、正しいブラウザとは異なる表示結果を意図的に作り出しています。 ほかのバグについても思いついたら追加していこうと思います。

（現在の表示の仕方ではclear関連のバグをテストするのは難しいかも。まぁCSSパズルみたいなものです。）