少し時間があったので、Windows Internet Explorer 7のCSSバグを検証してみた。
IE7 を含むモダンブラウザ向けの CSS ハックまとめにうまくまとまっているが、いくつか誤りもあり、新しいCSSハックも発掘したので少し書いておきたい。
検証したのは、Window Internet ExplorerのV6/V7、Firefox 1.5、OperaのV8/V9、Safari 1.3 です。今回はサンプルを用意しないので自分で確かめてほしいのと、複雑な属性セレクタを使ったものは難しい人もいると思うのでシンプルなものに限定してみた。
また、W3C CSS validator でValidなもののみに限定しています。
「*+html hack」(*+html bodyのハック)は、じつはOpera 8.0 以降にも適用されてしまう。実はEasy CSS hacks for IE7 - Nano See, Nano Doのコメントでも書かれています。
「*+html hack」(*+html bodyのハック)がOperaに適用され、「html>/**/body hack」(html>/**/bodyのハック)がinternet Explorer 7以外のモダンブラウザに適用されてしまうということは、Opera 8.0 以降に使えるハックができるじゃん、と思って実験してみました。
「*+html>/**/body」 のあとにセレクタを指定すると、Opera 8.0 以降にのみ適用されます。
「*+html hack」(*+html bodyのハック)をまず、現状のInternet Explorer 7に適用し、そのあとに「*+html>/**/body」 でOpera向けの指定を上書きします。
「* html body」のハックと「html>body」のハックを組み合わせてみました。
「* html>body」と記述すると、Machintosh Internet Explorer 5.x だけに適用されます。
なぜなら、「* html body」「html>body」の2つを同時に適用できるのは、Machintosh Internet Explorer 5.x だけだからです。
「html:first-child」なんて書いてみたら、SafariとOperaに適用されてしまいました。いちおう、W3C CSS validator では、validでした。
では、またOperaのハックに応用してみましょう。「*+html:first-child」とすると、Operaだけに適用されます。
このエントリーのトラックバックURL : http://www.studionh.net/mt/mt-tb.cgi/35