Меню списка CSS не работает должным образом в Internet Explorer 7 - PullRequest
Новая
       34

Меню списка CSS не работает должным образом в Internet Explorer 7

0 голосов
/ 31 марта 2012

У меня есть меню CSS, которое не работает должным образом в IE7.Он отлично работает в IE8 и во всех других браузерах.

В IE7 раскрывающийся список выглядит как показано на рисунке.

Вот меню: http://testsitefree.nfshost.com/

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

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

Ответы [ 3 ]

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

когда вы используете свойство margin или padding, добавьте другое свойство с помощью * означает создание дубликата для свойства margin / padding и добавьте * перед свойством.

например.

* padding-left: 20;

это свойство выполняется только в IE7, поэтому вы можете указать для него отдельное значение.

0 голосов
/ 31 марта 2012

Установить положение: относительное для #test LI UL вместо положения: абсолютное.Это устанавливает содержащий блок, но с другой стороны контекст стека, который является поддельным.

0 голосов
/ 31 марта 2012

удалить ниже css: 

#test li > ul {
    /*left: auto;*/ /* remove the css rule IE7 will work fine*/
    top: auto;
}

SS:

enter image description here

...