Webtech Walker

IE7用のハック(*+html body)で指定したスタイルがOperaにも適用される

僕は普段、IE7だけにスタイルを適用させたい場合「*+html body」を使用していたのですが、このハックで指定したスタイルがOperaにも適用される場合があるようなのです。

いろいろ実験してみた結果、XHTMLにXML宣言を入れたときのみOperaで「*+html body」ハックのスタイルが適用されるということがわかりました。検証環境はWindows Opera9.24です。

検証

body {
  background: blue;
}

*+html body {
  background: green;
}

上記のようなスタイルを指定したとき、各ブラウザでの挙動は下記のような結果になります。

ブラウザ 背景色
IE7
IE6、Firefox、safariなど
Opera(XML宣言あり)
Opera(XML宣言なし)

解決方法

そういうわけでXML宣言を入れてる場合にIE7のみ適用させたいスタイルがある場合は「*:first-child+html」を使用したほうよいです。このハックで指定したスタイルだとXML宣言の有無に関わらず、Operaには適用されないのを確認しました。

なのでIE7のみに適用させたいスタイルがある場合は以下のように書くとよいです。

body {
  background: blue;
}

*:first-child+html body {
  background: green;
}

まとめ

とりあえず今回のことでわかったのは、何が起こるかわからないのでハックは極力しないほうがいいということです。当たり前のことですが、改めて思い知りました。

もしかしたら他にも要因があるのかもしれなし、Operaのバージョンによって現象がでないとかいうこともあるかもしれません。詳しく知っている方は教えてください!

追記: hamashunさんがMacと9.50β1で検証してくださいました。ありがとうございます!
IE7用のCSSハックがOpera9.2xにも適用される件 | Blog hamashun.com
このエントリーをはてなブックマークに追加