webruaryのデモページ

CSSで背景画像をcenterにした際に1pxずれる時の対処法

Firefox、OperaとめずらしくIE8では発生しない現象。
「大元のdiv(今回だとlayout02)がmargin:0 auto;で、背景画像をrepeat-y」
「ブラウザのウィンドウサイズが奇数」
っていう状況下で、IE6、IE7、chrome、safariだとrepeat-yの画像が右に1pxズレる。

下のコードはなんかぐちゃぐちゃですが、対処法はIE6、IE7、chrome、safari用に右側に1px足した画像を用意してCSSハックで読み込ませるってだけです。

ちなみに2011年12月1日『Firefox 8』『Opera 11』『chrome 15』『safari 5』時点での検証なので、他バージョンでは通用しないかも…。
(↑全部Windows。)

class「layout02」

<p>にbackground:#aaa;を指定してもズレてないので、レイアウトじゃなく背景画像がズレてる。
ブラウザのウィンドウサイズを変えて偶数になるとこの部分もズレない。
全部700pxの背景画像を指定。
全部700pxの背景画像を指定。
全部700pxの背景画像を指定。
全部700pxの背景画像を指定。

footer
class「layout03」

全部揃った ワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ
真ん中のrepeat-yする画像だけ右側に1px足してる。
真ん中のrepeat-yする画像だけ右側に1px足してる。
真ん中のrepeat-yする画像だけ右側に1px足してる。
真ん中のrepeat-yする画像だけ右側に1px足してる。
真ん中のrepeat-yする画像だけ右側に1px足してる。

footer
html
<div class="layout03">
	<div class="layout03head">
	  class「layout03」
	</div>
	<p>
	  contents<br />
	  割愛...
	</p>
	<div class="layout03footer">
	  footer
	</div>
</div>
css
div.layout03{
  font-size:80%;
  color:#fff;
  margin-top:50px;
  background:url('background-center_02.jpg') 50% 0 repeat-y;
}

div.layout03 p{
  text-align:left;
  width:650px;
  padding:25px;
  margin:0 auto;
  background:#aaa;
}
* html div.layout03 p{width:700px;}

div.layout03head{
  text-align:left;
  width:650px;
  padding:25px;
  margin:0 auto;
  background:url('background-center_01.jpg') 50% 0 no-repeat;
}
* html div.layout03head{width:700px;}

div.layout03footer{
  text-align:left;
  width:650px;
  padding:25px;
  margin:0 auto;
  background:url('background-center_03.jpg') 50% 100% no-repeat;
}

/***************************************/
/* chrome safari用 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 div.layout03{background:url('background-center_04.jpg') 50% 0 repeat-y;}
}
/* ie6用 */
* html div.layout03{background:url('background-center_04.jpg') 50% 0 repeat-y;}
/* ie7用 */
*:first-child+html div.layout03{background:url('background-center_04.jpg') 50% 0 repeat-y;}
/***************************************/