またしてもIE。おのれIE。
バグ多すぎだよ、アナタ(￣▽￣;
CSSでbodyに背景画像を中央揃えで設定すると、IEでは左に1pxずれます。
safariやFirefoxではずれないので、またしてもIEお得意の「バグ」です。
IEを優先して調整したりすると、正しく描画しているsafari&Firefoxがずれます・・ダメすぎるよIE。
1pxぐらいのずれだと、そんなに気づかないことが多いんですが、たとえば
- W800pxの背景の左右に1pxのボーダーを引く。
上から下までボーダーを伸ばしたいので、CSSでbodyの背景画像として敷き詰めて、位置は中央揃えにする(背景画像はボーダーを入れるのでW802px）。 - その上にW800pxのコンテンツを配置する。そうすると、コンテンツの左右には1pxづつボーダーが見える。
・・ハズなんですよ。正しく描写してれば。
でも、IEは正しく描写しない。
左右にあるはずのボーダーのどちらかが消えてしまう。つまり、他のブラウザに比べて「中央揃え」が1pxずれてるのだ。
バグの回避方法は色々ある。
bodyの背景として指定するのではなく、別のIDの背景として敷いてやればいい。
でも、そうすると、上から下までぴっちりとボーダーが描写されない。コンテンツの量によっては、途中でボーダーが切れる。
今のところCSSでボックスhightを100%にするには色々と裏技が必要。そのうえ、やっぱりIEと他のモダンブラウザでは、微妙に解釈が異なるのでハックが必要だったりする。
もう一つの方法は、素直にbodyに指定して思いっきりハックを使う事。
これが一番手っ取り早い。
上記の方法も、ボックスhightを100%にするためにはハックを使わねばならず、どちらにせよハックとは離れられない運命です。
[source:css]
body {
background-image: url(img/background.gif);
background-repeat: repeat-y;
background-position: center;
margin: 0px;
}
/* IE7でpadding指定 */
*:first-child+html body {
padding-left: 1px;
}
[/source]
こんな感じです。
IE7とIE6以下ではハックの仕方が違うので、同じシリーズのブラウザだけど記述は別。
ソースを見れば分かるが、左に1px噛ませて正常に表示するようにしている。
このソースはミblogのIEで背景画像とコンテンツが1pxずれるのを回避する方法からの転記である。
IEで背景画像とコンテンツが1pxずれるのを回避する方法では、safariでの検証を行っていないらしいが、当方のMac版safariでは崩れていないので、おそらくWindowsも崩れていない可能性が高い（未だWin・safariを入れてないので確認できず）。
また、なぜ1pxずれるかという説明をアットウィズ｜実験レポートで詳しく説明している。
こちらの説明を読むと、ブラウザのサイズによってずれたり・ずれなかったりするらしい。
状況としては、ブラウザウインドウの幅-bodyに指定された背景幅=奇数サイズになった時にずれが起こるようだ。
ちなみにIEとそれ以外のブラウザは、奇数になった場合の端数処理が違うようで、正常に描写されるらしい・・IE、ここでもダメさ加減発揮。
それにしても、何度このバグと出会えばいいのやら・・。毎度このバグに苦しめられるわけですが、今回のサイトは完売すればいずれ閉じてしまう「期間限定」ものなので、思いっきりハックを使った。
他方でも同じバグが出たのだが、そちらは当分リニューアルすることもないだろうし、新しいブラウザが出ると、ハックの仕方も変わってきてしまう可能性があるので、少々構造を変えて納品した。
あまりスマートな方法とは言えなかったが、ハックをなるべく使わない主義の私としては、致し方ない方法だったのかなあと思います。
こうも描写にバグが多いと、オールCSSで組むのに骨が折れます。
かといって、当分IE6とIE7はお付き合いするわけですから、悩ましいところです。
2008.11.09追記：
当初の記事内では、IE6以下に関してもハックするようソースが入っていたが、検証したところIE6にずれは起きていない模様。そのためIE6以下用のハックは削除しました。
IE6については背景を正しく描写しているため、ハックすると背景が1px左にずれて表示されるのでご注意を。