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用*/

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

でもこれで

WindowsIE6、IE7、Opera9.6、Firefox3

MacFirefox3、Safari3

では大丈夫でした。