iphone - iPhone/iPad 上的 CSS 元素(带有 Sprite )无法正确缩放

Question

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

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

我尝试过将 的宽度和高度更改得更大，我还尝试将 包装在具有相同固定高度和宽度的 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;