以前「 CSSでbodyに設定した背景画像がIEでずれる怪」と言うアイテムをエントリーしていたが、それの後日談。
safariでも背景がずれる。
・・・最低である。safariもずれるとは。
原因はIEと同じで、「ブラウザウインドウの幅-bodyに指定された背景幅=奇数サイズ」になった時にずれるらしい。1pxずつブラウザ枠を動かすとずれたりずれなかったりするので間違いないだろう。
今回構築中のサイトで現象を発見し、その他IE6のカラム落ちを含め煮詰まること約半日・・やはりハックを使わねばならないようだ。
今のところsafari2での確認をしていないため不明だが、safari3でのずれを解消するため、ハックを使うことにした。
[source:css]
/* safari only \*/
body:first-of-type {
padding-left: 1px;
}
[/source:css]
この「body:first-of-type」はsafari3に有効。
上記のソースはbodyに設定した背景を中央配置にした場合のずれの回避方法。
［body:first-of-type］の後の要素名はこの場合だとbodyって事になるんだが、今回はbodyはいらないのでご注意を。入れちゃうとハックが有効になりません。
なお、他の要素にハックを仕掛ける時は
[source:css]
/* safari only \*/
body:first-of-type ＜要素名＞ {
padding-left: 1px;
}
[/source:css]
＜要素名＞っていうのは、Idやclassの事です。
safariは未だ発展途上のため、このハックもいつ使えなくなるかわからない。
safari2でハックを使ってないので不明だが、safari2で使えたハックはsafari3では無効になるようだ。
事実、safari2用のハックを使ってみたところ、safari3では無効になった。
しかし・・IEもさることながら、safariでも同様のバグがあるとは。現在私がターゲットブラウザにしているのは、IE6(Win)、IE7(Win)、Firefox(Win、Mac）、safari（Mac）である。
基本的に自分の手から離れてしまうサイトについては、なるべくハックを使わないようにしているのだが、こうなってしまうとどう頑張っても無理である。
CSSでのサイト構築をはじめて数年・・本当に悩ましい問題です。