2009.02.06

bodyに敷いた背景が1pxズレる件

HTML・CSSコーディングのお話です。ちょっとはまったのでメモ。

CSSで<body>タグに背景を中央配置し、縦にリピートさせます。
で、その背景の上にコンテンツ部分（#wrapper）を中央配置で載せると、1pxだけずれてしまいます。

body{
	background:url(../img/common/bg.gif) center repeat-y;
}

#wrapper{
	width:600px;
	margin:0 auto;
}

どうやら、IE6・IE7とFirefox3でこの現象が出るようです。
ズレるなら最初から逆方向にズラしておけば良いということで、IE6・IE7とFirefox3用に以下の指定を追加すればOK

/*firefox3*/
html>/**/body,x:-moz-any-link {
	margin-left:-1px;
}

/*IE6*/
* html body {
	padding-left: 1px;
}

/*IE7*/
*:first-child+html body {
	padding-left: 1px;
}