iPad上的CSS图像精灵定位

这是我的第一篇文章

我正在网站上使用CSS图像精灵。我已经通过验证器运行了HTML和CSS，这表明代码都是正确的，但是我遇到了图像精灵在iPad和计算机上的显示方式之间的差异

在iPad上，第五个精灵（contact）出现在图像精灵的下方，而不像其他精灵一样出现在主图像的底部。我只是不知道如何修复它

网站位于，样式表位于

HTML格式如下：

<IMG SRC="images/top.png" ID="MainIMG" ALT="Main Menu Image">

<ul class="cssmenu">
    <li class="salon"><a href="salon.htm" title="Salon"></a></li>
    <li class="services"><a href="services.htm" title="Services"></a></li>
    <li class="products"><a href="#" title="Products"></a></li>
    <li class="gallery"><a href="gallery.htm" title="Gallery"></a></li>
    <li class="contact"><a href="#" title="Contact Us"></a></li>
</ul>

ul.cssmenu {
    list-style: none;
    padding: 0;
    position: absolute; left: 182px; top: 437px;
    }
ul.displace {
    position: absolute;
    left: -5000px;
    }
ul.cssmenu li {
    float: left;
    }
ul.cssmenu li a {
    display: block;
    width: 192px;
    height: 99px;
    background: url('images/sprite.png');
    }   


ul.cssmenu li.salon a {
    background-position: 0 0;    }

ul.cssmenu li.services a {
    background-position: -192px 0;
    }
ul.cssmenu li.products a {
    background-position: -384px 0;
    }
ul.cssmenu li.gallery a {
    background-position: -576px 0;
    }
ul.cssmenu li.contact a {
    background-position: -768px 0;
    }

ul.cssmenu li.salon a:hover {
    background-position: 0 -99px;
    }
ul.cssmenu li.services a:hover {
    background-position: -192px -99px;
    }
ul.cssmenu li.products a:hover {
    background-position: -384px -99px;
    }
ul.cssmenu li.gallery a:hover {
    background-position: -576px -99px;
    }
ul.cssmenu li.contact a:hover {
    background-position: -768px -99px;
    }

我只是不确定我做错了什么，任何建议都将不胜感激

提前感谢,

---

Sarah

尝试将背景大小设置为精灵的自然大小：

ul.cssmenu li.salon a {
   background-position: 0 0;
   background-size: **width-value lenght-value**;
}

---

iPad的分辨率为1024（宽）。您的内容比这要宽，所以最后一行是下一行。不仅仅是iPad，还有任何屏幕更小的设备（包括台式机）。尝试将浏览器的大小调整为1024，您会发现您使用图像而不仅仅是文本链接有什么原因吗？