• このエントリーをはてなブックマークに追加

IE6は、Windows XPにデフォルトで搭載されているWebブラウザ。リリース当時はシェアがとても高かったということと、IE5.5などと比べるとレンダリングが優れていた。しかし、時間がたつに連れて新しいWebブラウザが登場して、CSSのレンダリングが怪しいといったところが出てきた。ようするにバグだったわけ。

IE6が普及していた頃は、floatを使ってレイアウトしていた。これを使うと、左右にレイアウトすることができて、テーブルを使わなくてもレイアウトが可能。ただし、幅の計算に問題があった。

floatのコードサンプル

以下のソースコードを打込み、IE6・IE7で確認するとボックスの左にかけた10pxのマージンが10pxではなく、20pxとなって表示される。IE8、Firefox、Chrome、Safariなどではこのようなことは起こらない(右にマージンを10pxかけても同様に2倍となる)。
もっとも有名な旧IE系のCSS解釈の計算バグです。

ただし、このケースのようにSample1がfloat:left;と指定している時にSample2に同じくfloat:left;とすると、Sample2の左のマージンは10pxとなる。

<body>
<style type="text/css">
#sample1{
float:left;
width:200px;
margin-left:10px;
background:#dcc;
}
#sample2{
float:left;
width:300px;
margin-left:10px;
background:#dd9;
}
</style>
<div id="sample1">
Sample1
</div>
<div id="sample2">
Sample2
</div>
</body>

IE6でこのようにさせたくない時は中にもうひとつボックスを設けるのが一番楽。

<body>
<style type="text/css">
#sample3{
float:left;
width:210px;
}
#sample3 .inner{
margin-left:10px;
background:#dcc;
}
#sample4{
float:left;
width:310px;
}
#sample4 .inner{
margin-left:10px;
background:#dd9;
}
</style>
<div id="sample3">
<div class="inner">
Sample3
</div>
</div>
<div id="sample4">
<div class="inner">
Sample4
</div>
</div>
</body>

IE6を使用しない

そもそもOSを含め、過去の遺産となってしまったので、これらのWebブラウザに出会うといったことはなくなった。そのため、floatそのもののレイアウト自体が見直されたり、あるいは違った解釈のものになるかもしれないので、これらの問題は眼の前に現れることはなくなった。

当時のことを語るには面白いネタ話にはなるが、当時の作業時はとても大変だった。登場時は、テーブルを多く利用していたが、IE8やIE9あたりが普及してきた頃が大変で、サポートを終了して、シェアが落ち込むまではこれらの問題をなんとか対応しないといけなかった。

他にも、IE6のように表示されてしまうといった減少があった。

Documentモード。HTMLの表示の冒頭には必ず、HTMLがどういった文章なのかということを明示していたが、これを行わなかったり、対応していないものを記述していると、過去の表示となってしまうため、バグに遭遇するということも。IE6に限らず、IE7、8、9などでもこれらは大変な問題だった。

IE11やEdgeが登場

IE11以降のサポート時代に突入して、display:flex;などが登場しそれらのつまらないバグに悩まされるといったことは少なくなった。