この現象はまだお目にかかったことはなかったのだが、今後「:first-child」を使う機械も増えると思い載せておくことにしました。しかも現在では対処方法がないとのことです。知ってるか知らないかの違いで、対処法を探し無駄に時間を費やすと思うとぞっとします。
IE7にHTMLのコメントもセレクタの対象として扱うというバグがあるそうです。
まずは現象を見てもらうのが手っ取り早いので、下のサンプルをIE7とFirefoxで見比べてみてください。
HTML
[html]
<div>
<p>1つ目の段落</p>
<p>2つ目の段落</p>
</div>
<div>
<!–コメント–>
<p>1つ目の段落</p>
<p>2つ目の段落</p>
</div>
[/html]
CSS
[css]
p:first-child{
color: #FFF;
background-color:#F86C18;
}
[/css]
IE7で見ると下の方には適用されていません。でもこの現象ではコメントがセレクタの対象となっているかはわかりません。それでは実験です。
今度は下のサンプルで見てみることにします。
HTML
[html]
<div>
<!–コメント–>
<p>1つ目の段落</p>
<p>2つ目の段落</p>
</div>
<div>
<p>1つ目の段落</p>
<!–コメント–>
<p>2つ目の段落</p>
</div>
[/html]
CSS
[css]
div *{
display: block;
padding: 0.5em;
color: #FFF;
background-color: #F86C18;
}
[/css]
これで見ると一目瞭然ですね。しかもこの問題はIE5.5のときからあるバグだそうです。IE7がいろんなセレクタに対応したために発覚したバグだそうです。
現時点の解決方法は「隣接セレクタ」や「:first-child」を使う場合には、その箇所にはHTMLのコメントを入れないようにするしかないようです。
知らなかったら解決策探すのに凄い時間をようするんだろうなぁ・・・恐ろしい話です。