主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

Firefox3.0だけ背景が1pxズレるバグ?

先日、背景が1pxズレるということがあって、たしかIEで背景が1pxズレるというバグがあったような気がしたので、それかなぁ、と思ったんですが、Firefox3.0だけズレてるのでおかしいのなぁ、と思って調べてみると、bodyに対して背景をしくと、ウィンドウサイズが奇数(か偶数)の時だけ、背景が1pxズレるというバグがあるらしいです。

うそやん、と思って、実際ウィンドウをちょっとずつ動かしてみると、ズレたり戻ったりを繰り返して、運悪くズレたところで止まってると、ズレてることに気づきます。

でも、wrapperとかを増やして、そっちに背景を指定してやれば、直ったりもしました。

たぶん。

2009/9 追記:
どうやら横幅がかっちり決まってないとずれるみたいです。
htmlやbodyには横幅が指定できないので。



その他、position:abusoluteでz-indexとかしていろいろしてると、IE6でそこにあるはずの要素がどっかにいってしまうときがあります。そういうときは、clear:bothか、clearfixが原因になっているっぽいです。


あと、iPhoneに変えました。
それだけです。


追記:

今度はFirefoxでウィンドウ幅が変わると1pxずれるという現象がおきました。htmlとbodyとdivに背景をつけてたのがだめだったのですが、どうやら、htmlかbodyに対して、センタリングした背景を指定するとずれるらしく、divを一個増やして、body、div、divという感じにして、divに横幅を指定するとずれなくなりました。



参考:
固定幅+中央寄せ」時の背景ズレ対策