firefoxのみに効くCSSハック

 ページを作っていて、どーしてもfirefoxでだけ1ピクセルずれる減少に悩まされ、firefoxだけに適用されるCSSハックを探したのですが、これが意外とありませんでした。

 「:-moz-broken」などのfirefoxでしか使えない"独自実装擬似クラス"をセレクタに混ぜ込むことによってfirefoxでしか適用されないCSSを定義するという記事もありました。

div#menu, x:-moz-any-link { STYLE }

 しかしこれがIE7にもどうやら適用されてしまうようなのです。

 そこで、最初にfirefoxのスタイルを書き、さらにそれ以外のブラウザのスタイルを書くことで何とか解決しました。

SELECTOR { STYLE }/*firefox用*/
*:first-child+html SELECTOR { STYLE }/*IE7用*/
* html  SELECTOR { STYLE } /*〜IE6用*/
body:first-of-type  SELECTOR { STYLE }/*Safari and Opera用*/

 うーん、こんなのでいいのかしら(^.^;)
 でもこれで

Windows IE6、IE7、Opera9.6、Firefox3
Mac Firefox3、Safari3

 では大丈夫でした。

同一カテゴリー(CSS)内記事

トラックバックURL

このエントリーへのリンク:

このエントリーのトラックバックURL:

コメントする