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

Question

我的主页上有一个列表，每个列表都有一个链接。每个列表项都有不同的高度和宽度，就像页面上的块一样。在每个列表项中都有一个指向我这边另一个区域的链接。环绕这个列表的是一个容器 div，与大多数网站一样带有页眉和页脚。 ul对图片也使用了CSS精灵，这样正常的图片只有图片高度的一半左右，底部是其他图片精灵。

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

我尝试将 的宽度和高度更改为更大，我还尝试将 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>

Answer 1

您可以通过在后台声明中添加no-repeat 来解决重复问题。

背景：url(../images/main.jpg) -642px -1360px 无重复；