IE7スターハック(*:first-child+html)が効かない場合の確認点
IE7でのみcssをちょっと変えたい場合に用いられるハックの一つとして、
「*:first-child+html」があります。
これはIE7スターハックと呼ばれているようです。
IE 6とIE 7のためのCSSハック16選(3/3)- @IT
しかしこれが効かないケースがあってアレコレとハマったのでメモしておきます。
正常に動くサンプル
まずは正常に動くサンプルです。
以下のファイルをsample.htmlとでもして保存しブラウザで開いてみます。
IE7以外では前半のスタイルが効いて(後半は無視され)緑文字でTestと表示され、
IE7で見ると後半のスタイルが効くため上書きされて赤文字でTestと出ます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #target{ color: green; } *:first-child+html #target{ color: red; } </style> </head> <body> <span id="target">Test</span> </body> </html>
動かないケース
対象要素の前にコメントが入っている
コレが今回ハマったところ。
上記例で言えばfirst-child+htmlとしているので、htmlタグの前にコメントがあるとアウトです。
つまりこんな感じのソースがダメ。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- IE7スターハックを効かなくしてやろうか! --> <html> <head> <style type="text/css"> #target{ color: green; } *:first-child+html #target{ color: red; } </style> </head> <body> <span id="target">Test</span> </body> </html>
こちらが大変参考になりました。ありがとうございます。
XHTMLのコメントもセレクタ対象?(:first-childが効かない-IE7-) - Probationer M's Labo
しかもこの問題はIE5.5のときからあるバグだそうです。IE7がいろんなセレクタに対応したために発覚したバグだそうです。
あと今回は大丈夫だったけど、注意しないといけない点を2つ。
DOCTYPEが宣言されていない
上記サンプルからDOCTYPE宣言を消すとIE7でも緑文字になります。
DOCTYPEにて後方互換モードが宣言されている
これは試さなかったんですが、後方互換モードでもダメそう。
うのらぼ。 - 【HTML】IE7標準準拠とか後方互換とかIE8とか
結論
IE対応の苦労はやった人しか分からない。偉い人にはそれが分からんのですよ…。