:first-letter擬似要素と各擬似クラス絡みのInternet Explorer 6のバグ

all about blosxomのサイトを作った時にハマった、:first-letter絡みのInternet Explorer 6のバグにまたハマった(学習していない)のでまとめておいてみる。そのバグは、display: block;としたa要素に対して:first-letter擬似要素・:hover擬似クラス・:hover擬似クラスなどを利用してスタイルの指定をした場合、:first-letter擬似要素によるスタイルの指定は有効であるが、各擬似クラスによるスタイルの指定が無効になるというもの。

何はともあれテスト・ページを参照。例としてタブ型のナビゲーションを作成してみた(というかタブ型のナビゲーションを作っているときに遭遇した)。

CSSのコードのバグを含む部分は、

div#navigation ul li a:first-letter {
  text-decoration: underline;
}

div#navigation ul li a:hover {
  color: #ffffff;
  background-color: #006699;
}

div#navigation ul li a:active {
  color: #ffffff;
  background-color: #996600;
}

と、特に問題のありそうなところはなく、Firefox 1.5やOpera 9では意図した通りのスタイルの指定になる。いろいろ試してみたが、回避手段は:first-letter擬似要素を使わないという以外に無い模様。しかもこのバグは同じページ内の全ての擬似クラスによるスタイルの指定がおかしくなるというかなり意味不明な挙動をする模様(テスト・ページの付記を参照)。

Internet Explorer 6においてa要素に対する:first-letter擬似要素を使ったセレクタは、クラッシュするという致命的なバグも含めかなり挙動不審。:first-letter擬似要素はブロック・レベル要素のみでしかマッチしないということになっているので、考慮外だったとかそういうことなのだろうか。つまるところ:first-letter擬似要素を使ったセレクタは、Internet Explorer以外だけに適用されるようにしか使うことが出来ないということになる。

Internet Explorer 7 Beta 3では直っている感じ。どうでもいいけど。