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

Question

我的主页上有一个列表，每个列表都有一个链接。每个列表项目具有不同的高度和宽度，其作用与页面上的块相同。每个列表项目内都有一个链接到我身边的另一个区域。围绕这个列表是一个容器div，像大多数网站一样具有页眉和页脚。 ul还为图像使用了一个CSS精灵，因此普通图片只有图像高度的一半左右，而底部则是其他图像精灵。

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

我已经尝试改变的宽度和高度要大得多，我也试图用相同的固定高度和宽度包装在一个div。我还尝试在使用iphones/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> 

Answer 1

您可以通过将no-repeat添加到背景声明中来解决重复问题。

background：url（../ images/main.jpg）-642px -1360px no-repeat;