IE6とIE8のスタイルシートの違い

前回はいかにIE8がファジーで勝手に期待通りの挙動をしてくれるかの話をしたのだが、今回はIE6のスタイルシートを少し解説する。

「みなさん、これが私のサイトです。よろしかったら使ってみてください」と友人・知人に触れ回ったところ、それでものが動かないというのはかなり恥ずかしいもので、ことにIEはVersion毎にCSSの解釈にかなりの差異があるので注意が必要だ。とくにIE6には注意しよう。

実際にこの統計からIE6の使用者は2009年8月時点でまだ13.6％もいる。徐々に減りつつあるとはいえ、最新版のIE8よりもシェアが多い。無視できない割合だ。

実際に何が問題なのかは次の画像を見比べてほしい。

こっちはIE8。


これはIE6（IE8では描写されている画像上部のタブが無い）。


こっちはIE8。


これはIE6（投票するための上下の矢印が無い）。


全体的にCSSが機能していないのが見て取れる。なぜかというのを調べてみたらどうやら下記のようなCSSの記述方法に問題があるらしい。

div>span
{
 font-weight:bold;
}

このspanの部分、div要素の子要素を指定しているspanの部分が機能していない。IE6ではこのような記述を解釈しないようだ。回避方法としては・・・、そのうち調査します。