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
しかし・・前バージョンでは大丈夫だったのに、今バージョンでは右にずれるってどういう事じゃ!
- /* FireFox 2 */
(該当class、またはID), x:-moz-any-link
{
(ユーザーの設定値)
} - /* FireFox 3 */
(該当class、またはID), x:-moz-any-link, x:default
{
(ユーザーの設定値)
} - /* 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….