iPhone/iPad上的CSS元素（带有精灵）缩放不正确

我的主页上有一个列表，每个列表都有一个链接。每个列表项都有不同的高度和宽度，就像页面上的块一样。在每个列表项中都有一个指向我这边另一个区域的链接。围绕这个列表的是一个container div，与大多数站点一样，它有一个页眉和页脚。ul还为图像使用CSS精灵，因此普通图片只有图像高度的一半左右，底部是其他图像精灵

---

由于某些原因，iphone/ipad上的图像缩放不正确，事实上my似乎从左到右重复背景，而且高度也没有保持，因此您可以看到精灵的其他图像。如果我在背景上设置了no repeat，则只填充了容器div的一半，飞溅部分的右侧有一个很大的白色间隙，底部区域仍然显示其他精灵

我已经尝试将的宽度和高度更改为更大，我还尝试使用相同的固定高度和宽度将其包装在一个div中。我还尝试在使用iPhone/iPad时添加“”标记。所有这些都没有任何区别。看起来无序列表只是不想填充到容器中

<style media="screen">
#main{
 width: 985px;
 height: 1078px;
 background: url(../images/main.jpg);
 margin: 0px; 
 padding: 0;
 position: relative;
}

#main li {
 margin: 0; 
 padding: 0; 
 list-style: none;
}

#mainSection1 a { left: 642px; width: 193px; top: 282px; height: 18px; position: absolute; }
#mainSection1 a:hover { background: url(../images/main.jpg) -642px -1360px; }
/* ... and so forth */
</style>

<ul id="main">
   <li="mainSection1"><a href="anotherpage></a></li>
   <!-- there are 8 other list items here repeating the same -->
</ul>

#主要{
宽度：985px；
高度：1078px；
背景：url（../images/main.jpg）；
边际：0px；
填充：0；
位置：相对位置；
}
#李少杰{
保证金：0；
填充：0；
列表样式：无；
}
#MainSection1a{左侧：642px；宽度：193px；顶部：282px；高度：18px；位置：绝对；}
#mainsection1a:hover{background:url（../images/main.jpg）-642px-1360px；}
/* ... 诸如此类*/

您可以通过在后台声明中添加

no repeat

来解决重复问题

背景：url（../images/main.jpg）-642px-1360px不重复

---

“如果我不在背景上设置“重复”，则只填充了容器div的一半，飞溅部分右侧有一个巨大的白色间隙，底部区域仍然显示其他精灵。”[sic]Dominic，你有我可以查看的live版本吗？希望你现在已经解决了。但若你们还并没有，你们可以发布一个屏幕截图，说明它的意思是什么，最好是用不同颜色的不同元素。iPhone4的缩放问题