Firefox, Safari ハック

特定のブラウザのみ表示がおかしい場合、そのブラウザのみスタイルを適用させたいことがあります。
そんなときは下記を参考にしていただければと思います。

Firefox 3.5以降に適用させるハック

モズブロークンハック (Moz brokene hack)

セレクタの後に「, x:-moz-broken, x:last-of-type」をつけます。

.ff1, x:-moz-broken, x:last-of-type {color: #c00 }

Firefoxで表示すると下記のテキストが赤字で表示されます。
「Firefoxで適用されているテキストサンプル(モズブロークンハック)」

Safari 2-3のみに適用させるハック

FirefoxやChromeには適用されません。

html[xmlns*=""] body:last-child .safari_hack1 {color: #c00;}

Safari 2-3で表示すると下記のテキストが赤字で表示されます。
「Safari 2-3で適用されているテキストサンプル」

Safari 2-3.1のみに適用させるハック

FirefoxやChromeには適用されません。

html[xmlns*=""]:root .safari_hack2 {color: #c00;}

Safari 2-3.1で表示すると下記のテキストが赤字で表示されます。
「Safari 2-3.1で適用されているテキストサンプル」

Safari 3以降、Chromeに適用させるハック

Firefoxに適用させたくない場合に使用します。

@media screen and (-webkit-min-device-pixel-ratio:0) {
.safari_hack3 {color: #c00;}
}

もうひとつはFirefoxの一部のバージョンには適用されていましたが、少なくてもVersion30.0は適用されなくなりました。

body:first-of-type .safari_hack4 {color: #c00;}

Safari 3以降、もしくはChromeで表示すると下記のテキストが赤字で表示されます。
「Safari 3以降、およびChromeで適用されているテキストサンプル(webkit-min-device-pixel-ratio:0)」
「Safari 3以降、およびChromeで適用されているテキストサンプル(first-of-type)」