IE7のCSSバグとOpera CSS Hack

少し時間があったので、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なもののみに限定しています。

Internet Explorer 7のハック

「*+html hack」(*+html bodyのハック)は、じつはOpera 8.0 以降にも適用されてしまう。実はEasy CSS hacks for IE7 - Nano See, Nano Doのコメントでも書かれています。

Opera 8 以降のハック

「*+html hack」(*+html bodyのハック)がOperaに適用され、「html>/**/body hack」(html>/**/bodyのハック)がinternet Explorer 7以外のモダンブラウザに適用されてしまうということは、Opera 8.0 以降に使えるハックができるじゃん、と思って実験してみました。
「*+html>/**/body」 のあとにセレクタを指定すると、Opera 8.0 以降にのみ適用されます。

現状のInternet Explorer 7のハックの書き方

「*+html hack」(*+html bodyのハック)をまず、現状のInternet Explorer 7に適用し、そのあとに「*+html>/**/body」 でOpera向けの指定を上書きします。

ついでに、Machintosh Internet Explorer hackも

「* html body」のハックと「html>body」のハックを組み合わせてみました。
「* html>body」と記述すると、Machintosh Internet Explorer 5.x だけに適用されます。
なぜなら、「* html body」「html>body」の2つを同時に適用できるのは、Machintosh Internet Explorer 5.x だけだからです。

ついでに、SafariとOperaに適用されるハックも

「html:first-child」なんて書いてみたら、SafariとOperaに適用されてしまいました。いちおう、W3C CSS validator では、validでした。
では、またOperaのハックに応用してみましょう。「*+html:first-child」とすると、Operaだけに適用されます。


トラックバック

このエントリーのトラックバックURL : http://www.studionh.net/mt/mt-tb.cgi/35

この一覧は、次のエントリーを参照しています。

コメントを投稿

以下の内容が送信されます。

※ブログオーナーが承認したコメントのみ表示されます。

Return To Top

カテゴリー一覧
月別アーカイブ一覧
最近のエントリー

以前の記事へ