CSS-спрайты неправильно отображаются в Internet Explorer 6/7/8 - PullRequest
Новая
       35

CSS-спрайты неправильно отображаются в Internet Explorer 6/7/8

1 голос
/ 29 марта 2012

Тестовый сайт здесь:

http://testsitefree.nfshost.com/

IE9: отлично работает

IE8: отображается только первое изображение.

IE7: толькопервое изображение отображается + выпадающее меню перемещается вправо.

IE6: не работает

Firefox 3: отображается только первое изображение.

Спасибо за помощь.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title> test</title>
<style type ="text/css">

#test {
                position:absolute;
                left:710px;
                top:0px;
                font-family:tahoma, verdana, arial, helvetica, sans-serif;
                font-size:10px;
                z-index:200;
                }

body {   behavior:url(csshover.htc); }  

#test .abab {
                background:green;
                }

#test p a {
                color: #000;
                text-decoration:underline!important;
                }

#test a {
                color:#fff;
                text-decoration:none;
                }

#test a.number {
                color:#2f343a;
                }

#test p a:hover { 
                text-decoration: none!important;
                }

ul#test {
                list-style: none;
                padding: 0;
                margin: 0;
                }


ul#test li a {
                display: block;
                font-weight: normal;
                padding: 1px;
                background:#fff;
                }

ul#test li a:hover{
                background:#2f343a;
                color:#fff;
                list-style:none;
                }

#test li {
                float: left;
                position: relative;
                width: 90px;
                text-align: center;
                margin-right:0px;
                border:0px solid #ccc;
                }

ul#test li.current a {
                background:#ccc;
                }

ul#test li.current a:hover {
                background:#ccc;
                }

#test li ul {
                display: none;
                width:90px;
                top: 18px;
                left: 0;
                font-weight: normal;
                font-size:9px;
                text-align:left;
                padding-left:0;
                margin-left:0;
                position:absolute;
                }

ul#test li ul.sub1 li, ul#test li ul.sub2 li, ul#test li ul.sub3 li {
                border-width:0px 1px 1px 1px!important;
                width:88px;
                }

ul#test li ul.sub1 li a.number, ul#test li ul.sub2 li a.number, ul#test li ul.sub3 li a.number {
                font-weight: normal!important;  
                counter-increment:image;
                padding-left:20px;
                background-image:url(small.jpg);
                background-repeat:no-repeat;
                }


ul#test li ul.sub1 li.img1 a{
                 background-position: 0px 0px;                 
                 }  

ul#test li ul.sub1 li.img2 a{                 
                background-position: 0px -13px;                 
                } 


ul#test li ul.sub1 li.img3 a{
                background-position: 0px -26px;
                }

ul#test li ul.sub1 li.img4 a{
                background-position: 0px -39px;
                }

ul#test li ul.sub1 li.img5 a{
                background-position: 0px  -52px;
                }




#test li>ul {
                top: auto;
                left: auto;
                }

#test li:hover ul, li.over ul {
                display: block;
                }

#test .sub1 li, #test .sub2 li, #test .sub3 li {
                list-style:none;
                text-align:left;


                }

</style>

</head>
<body>
<ul id="test">

    <li><a class="abab" href="content/testpopular.php" title="Menu">TEST</a>
      <ul class="sub1">
         <li class="img1"><a class="number" href="#" title="Number1">Number1</a></li>
         <li class="img2"><a class="number"  href="#" title="Number2">Number2</a></li>
         <li class="img3"><a class="number"  href="#" title="Number3">Number3</a></li>
         <li class="img4"><a class="number" href="#" title="Number4">Number4</a></li>
         <li class="img5"><a class="number" href="#" title="Number5">Number5</a></li>
      </ul>
    </li>







</ul>

</body>

</html>

1 Ответ

2 голосов
/ 29 марта 2012

Вы используете CSS3-селектор nth-child (), который не работает в старых браузерах.Я бы посоветовал присваивать индивидуальные имена классов вашим элементам следующим образом: 

ul#test li ul.sub1 li.sub2 a
{
    background-position: 0px 0px;
}
...