近頃の、とあるR。

固定幅＋中央寄せサイト が多い

私に回ってくるコーディングのお仕事の場合、ほとんどがサイトwidth固定デザインです。なお幅固定の是非は今回は論じません。昔は「左寄せ」＋幅固定なんてのも珍しくなかったのですが、近頃ははめっきりセンタリングです。

背景がずれる

偶数のモノを中央に寄せると言うことは、厳密には「左右いずれかに１ドットずれる」と言うことです。
出来れば規格でその左右が決まっていればよいのですが、まぁ、ブラウザ毎に異なっても仕方ありません。しかし、仕方なくない事も(ノ∀｀)
IEやFireFoxは、フォアグラウンドとバックグラウンドで、ズレ方が違うんですよねぇ……
SafariやOperaは手前と奥のズレ方に差違はありませんので、例え左右どちらにずれていようともズレを感じませんが、IEやFFはウィンドウサイズによって「背景が１ドットずれたりずれなかったり」と不安定なのです。

奇数幅の背景でカバー

偶数幅だからずれる訳です。ええ、奇数幅の背景画像にしましょう。
IEは１ドットのマージンを「右に」入れると揃います。
FFは１ドットのマージンを「左に」入れると揃います。
OperaやSafari等、本来ずれないブラウザは左右何れかにマージンを入れると当然ずれてしまいます。
ええ、場合分けが必要なんですね。

CSSハックで

このためだけにサーバサイドスクリプトやJavaScriptで分岐させるのは負けた気がします。
CSSハックは大嫌い(笑)なのですが、意味合いの重みと手段を釣り合わせる意味では、やはりCSSハックが現実的でしょうか。
と言う訳で、落ち着いたコードが以下。

body {
	background : url(../images/bg.gif) repeat-y center 0;
	_background: url(../images/bg-mr.gif) repeat-y center 0;	/* for IE6 */
	*background: url(../images/bg-mr.gif) repeat-y center 0;	/* for IE7 */
}
html>/**/body,x:-moz-any-link { /* for firefox */
	background : url(../images/bg-ml.gif) repeat-y center 0;
}

FireFoxのみに適応させるノウハウは、抜群にエレガントなFirefox 1.0, 1.5, 3.0 用の CSS ハックを頂きました。