CSSテクニック:モダンブラウザ向けのCSSハック

|
すべてのブラウザで同じ表示をさせるのは残念ながら難しいです。通常のCSSとは別に、現状最もシェアの多いInternet Explorer 6, 7にバグが多いので専用の追加のソースを用意しないといけません。そこで、ブラウザの実装上のバグを利用して、ブラウザごとにそれぞれのCSSを読み込ませるCSSハックと呼ばれるものがあります。それをいくつかご紹介いたします。


対象ブラウザ

  • バージョン6以下のIE
  • バージョン7のIEのみ
  • それ以外のモダンブラウザ(Firefox、Safari、Opera)


バージョン 6 以下の IE にのみ適用:「スターハック」と呼ばれています
(バージョン6以下のIE以外のブラウザは親要素からの継承です)

* html body p { color:#FFFFFF; }


バージョン 7 の IE にのみ適用
(バージョン7のIE以外のブラウザは親要素からの継承です)

*:first-child+html p { color:#FFFFFF; }


IE7 を除くモダンブラウザにのみ適用
(IEはすべて親要素からの継承です)

html>/**/body p { color:#FFFFFF; }


他にも、Mac IE5用のHollyハックやハッシュハック、アンダースコアハックなど色々ありますが、使用頻度が多いのは上記のバージョン6以下のIE用バージョン7のIE専用じゃないでしょうかね。


参考サイト
IE7 を含むモダンブラウザ向けの CSS ハックまとめhttp://www.lucky-bag.com/archives/2006/06/css-hacks.html

CSSハック | BLOG × WORLD ENDING
http://blog.worldending.jp/archives/2006/07/css.php#notebook
よかったらぽちっと→ にほんブログ村 デザインブログ Webデザインへ

Archives

Google

WWW を検索 ilog* を検索