ブラウザ別ハック一覧 IE6～Google Chromeまで
Posted under: 
一般的なシェアからいってIEが多いのですが、
最近はいろいろなブラウザがあり使う方も多いので、
それぞれのブラウザで表示が思うようにいかない場合に、
また、どうしてもという必要に迫られた時のみ使用するのが良いかなと。
とはいえ、IEだけでも各バージョンがあり、それぞれ表示が異なってきたりするので、
ちょこっとだけ手直しは現在のところ必須かもしれません・・
IE6のみに適用する場合
1 2 3 | #selector { _color: #000; } |
IE７のみに適用する場合（今回は２種類）
1 2 3 | *:first-child + html #selector { color: #000; } |
1 2 3 4 5 6 7 8 9 | #selector { color: #eee;/* 一般的なブラウザ */ } #selector { *color: #000;/* IE7 */ } #selector { _color: #eee;/* IE6 */ } |
IE6 IE7の両方に適用する場合
1 2 3 | #selector { *color: #000; } |
IE8に適用する場合
1 2 3 | html>/**/body #selector { color /*\**/: #000; } |
Fx 1.5, 2.0 以降に適用する場合
1 2 3 | #selector, x:-moz-read-only { color: #000; } |
Fx 2 に適用する場合
1 2 3 | #selector, x:-moz-any-link { color: #000; } |
Fx 3 に適用する場合
1 2 3 4 5 6 | #selector, x:-moz-any-link { color: #eee;/* Fx2用 */ } #selector, x:-moz-any-link, x:default { color: #000;/* Fx3用を上書き */ } |
Fx 3.0 以降に適用する場合
1 2 3 | #selector, x:-moz-broken { color: #000; } |
Fx 3.5 以降に適用する場合
1 2 3 | .huck, x:-moz-broken, x:last-of-type { color: #000; } |
Safari 3.0に適用する場合（CSS3を利用しているためFx3.5もサポート）
1 2 3 | body:first-of-type #selector { color: #000; } |
Safari 3.1 and Google Chromeに適用する場合（Fx3.5もサポート）
1 2 3 | body:nth-of-type(1) #selector { color: #000; } |
Opera 9 に適用する場合
1 2 3 4 5 6 7 8 9 | @media screen and (-webkit-min-device-pixel-ratio:0){ #selector { color: #eee;/* SafariとChrome用 */ } } body:first-of-type #selector { color: #000;/* Opera 9用 */ } |
以上、最近主流のブラウザハックのまとめでした。
※ # selector となっているところは任意の要素です。
※ color: #eee; となっているところは任意のプロパティーです。
こちらも合わせてご覧ください - このページの内容と関連がある記事 -
タグ: CSSハック
TrackBack URL for this entry
コメントをいただけると励みになります！よろしくお願いします。
Blog info
Recommend Servers
