0

これは私の最初の投稿です。

構築中の Web サイトで CSS 画像スプライトを使用しています。コードがすべて正しいことを示唆するバリデーターを介して HTML と CSS の両方を実行しましたが、iPad とコンピューターで画像スプライトがどのように表示されるかについて矛盾が生じています。

iPad では、5 番目のスプライト (接触) は、他のすべてのスプライトのようにメイン イメージの下部ではなく、イメージ スプライトの下に表示されます。私はそれを修正する方法がわかりません。

Web サイトは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

background-size をスプライトの自然なサイズに設定してみてください:

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