スマホ、横向きで背景リピートするとずれる
スマホ版サイトをviewport640pxで制作しています。
例えば、四角い背景を入れたい時に、「ブロック要素の上と下に画像を入れて、その間は細長い画像を背景としてリピートさせる」
みたいなことをされる方は多いと思うのですが、これをやると、スマホ（iPhone5Sで確認）を横向きにしたときに、
つなぎ目が1pxくらい、微妙にずれてしまって困っています。
色々と検証してみると、どうやらボックスにマージンを取ると発生する現象のようです。
ボックスをセンター寄せにしたいので、margin:0 auto;とか、margin:0 20px;とか書くと、リピートした背景が微妙に左にずれてしまいます。
ボックスサイズは600px、画像サイズもすべて600pxです。
画像の縮小率の問題かと思い、縦向きの320px、横向き480px の約数（？）の12pxで書き出してみたりしたのですが解決せず。。
そもそも、スマホサイトでこんな指定はなかなかされないかと思いますが、
今回はデザイン上、どうしても間の背景をリピートする方法を取りたく。
原因をご存知の方いらっしゃいましたらご教授いただけると幸いです。
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=640" />
</head>
<body>
<style type="text/css">
html, body, div {
margin:0;
padding:0;
}
img#top {
vertical-align:bottom;
}
img#bottom {
vertical-align:top;
}
#wrap {
width:600px;
margin:0 20px;/*これを取るとずれない*/
}
#wrap>div {
background:url(middle.gif) repeat-y center center;
}
</style>
<div id="wrap">
<img src="top.gif" alt="" id="top">
<div>
hogehoge
</div>
<img src="bottom.gif" alt="" id="bottom">
</div>
</body>
</html>
お礼
ご回答ありがとうございました！ 上記HTMLで、Softbank, AUで確認することが出来ました。 ただDoCoMoだけできないんですよね。。 # 共通でできないにせよ、DoCoMoだけできるやり方も知りたいです。