0

这是我的第一篇文章。

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

在 iPad 上，第 5 个精灵（联系人）出现在图像精灵下方，而不是像所有其他精灵一样位于主图像的底部。我只是不确定如何解决它。

该网站是http://www.pureelegancehair.com.au/index-real.htm，样式表位于http://www.pureelgancehair.com.au/main-style.css。

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>

CSS如下：

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

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

提前致谢，

莎拉

4

1 回答 1

0

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

ul.cssmenu li.salon a {
   background-position: 0 0;
   background-size: **width-value lenght-value**;
}
于 2015-02-23T15:13:54.070 回答