Webデザイン・デザイン全般のご依頼を承るエム・アールデザインのブログです。

Mac FireFox3も背景がずれる・・・。

CSSでbodyに設定した背景画像がIEでずれる怪・Safari3も背景がずれる・・。で、IEとSafariの困ったバグの話をしましたが、今回はFireFoxです。それもMac限定。orz….。

MacFireFox3もFireFox2とは違い背景ずれます。
なおWindows FireFox3ではこのバグはない模様。

ひょんなんことからMacFireFoxをアップデートする前に上げたサイトをのぞいてみると・・・なんか、右にずれてる。

そのサイトもIE7とSafari用に背景を左に1pxハックしているため、それが原因かな？と思ったため、ハックを外してみても表示は変わらず。
もしや(￣▽￣;
あわてて検索してみる。

ありましたね。FireFox3のハック
Firefox3でCSSバグに対応するCSSハック | Lovelog *
Firefox 3 CSS hack – CSS – Snipplr

しかし・・前バージョンでは大丈夫だったのに、今バージョンでは右にずれるってどういう事じゃ！

1. /* FireFox 2 */
   （該当class、またはID）, x:-moz-any-link
   {
   （ユーザーの設定値）
   }
2. /* FireFox 3 */
   （該当class、またはID）, x:-moz-any-link, x:default
   {
   （ユーザーの設定値）
   }
3. /* Only FireFox 3 */
   html>/**/body （該当class、またはID）, x:-moz-any-link, x:default
   {
   （ユーザーの設定値）
   }

・・・という形でハックできます。（　）でくくっている場所に、該当する内容を追加すればOK。
「FireFox3のみ」のハックについては、bodyについてハックする場合（該当class、またはID）はなくていいです。

同じFireFoxでもWindows版はどうなの？というところですが、今のところバグは確認していません。上記のハックもWindows版では無効になるようです。

今回私が利用したのは
/* FireFox 3 only */
html>/**/body, x:-moz-any-link, x:default
{
padding-right: 1px;
}

・・という形だったのですが、右1pxずらしているにも関わらずWindows版ではずれません。
少なくとも同じver.3でも、Mac側には有効になりWindows版では無効になっているようです。
・・なんて面倒なorz….

こちらの記事もどうぞ

1. Safari3も背景がずれる・・。
2. 標準モードのCSSで高さ100%のボックスを可能にする方法。
3. CSSでbodyに設定した背景画像がIEでずれる怪

2009年1月28日6:49 PM| カテゴリー：Webデザイン| コメント：（0）