Question

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

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

我已经尝试过更大的宽度和高度，我也尝试用相同的固定高度和宽度包裹div。我还试图在使用iphones / ipads时添加''标签。这些都没有任何区别。好像无序列表似乎不想填写容器。

<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;

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

1 个答案: