ぜひ覚えておきたいハック

スタイルシートを使う以上避けて通ることの出来ないブラウザーのバグの数々。このようなバグに対抗するための裏技をハックといいます。

2006年6月の時点でIE7のβ版が公開されています。正式版が登場するのも時間の問題ですね。そうすると現在主流のIE6とIE7の世代交代が起き、 ブラウザーの移行期に入ります。これからはfirefox,IE7を基準においたサイト制作が主流になっていきますが、移行が一段落するまではIE6のバグ対策はしっかり行う必要がありそうです。

今回紹介するのは、もっともシンプルかつ便利なもので、これさえ覚えておけばIE7が主流になるまで乗り切ることができます。

子供セレクタ「>」を使います。

.main li.on{
/*IE6用*/
    float:left;
    overflow:hidden;
    width:100px;
    background-color:#FFFFD5;
    border:1px solid #993300;
}
.main>li.on{
/*firefox・IE7で上書きしたいものを記述*/
overflow:visible;
}

IE6が子供セレクタを理解できないのを利用します。

最初にIE6に合わせたスタイルシートを書き、その後にIE6でバグのある部分を子供セレクタ「>」を使って上書きします。

上のサンプルではoverflowの処理の仕方にIE6では問題があったため、この部分を後から上書きしています。

通常のページ作成ではあまり使う機会はないかもしれませんが、超絶テクニックなど、難度の高い表現をするときによく利用します。 ページを作成する際は標準準拠モードで制作しましょう。

ほかにも色々あるのですが、うちのサイトを利用されているレベルの方ならこれで十分だと思われます。 また、IE5.5などはもう対象外にしても良い時期になっていると思うので、対象外としました。

---