Меню навигации - не работает в IE - PullRequest
Новая
       20

Меню навигации - не работает в IE

0 голосов
/ 27 июня 2011

Я разработал меню навигации, оно отлично работает на Chrome и Firefox, но оно не работает должным образом на IE7 и IE8. Как это исправить?

Примечание: это не выпадающая функция. 

<div class="nav-block">
                <ul id="nav">
                <li><a class="active" href="/">Home</a></li>

                <li>
                <a href="/">Category</a>
                  <ul class='subnav'> 
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                  </ul>
                </li>
                <li>
                <a href="/">Accounts</a>
                  <ul class='subnav'> 
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                  </ul>
                </li>
                <li><a href="/">Logout</a></li>
            </ul>
</div>

CSS: 

<style>
.nav-block{
    background-color:black;
    height: 45px;
}

#nav {
    padding:12px;
    list-style:none;
}

#nav li{
    display:inline;
    margin:0 1px 0 -1px;
    padding:3px 15px;
    float:left;
    font-size:14px;
}

#nav a {
    background-color:white;
    color:#C51721;
    padding:10px;
    text-decoration: none;
}

#nav .subnav {
    padding:0px;
    list-style:none;
    width:130px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    color:#000000;
    margin-top:9px;
    margin-left:-2px;
    background-color:white;
}

#nav .subnav li {
    padding:0px;
    float: none;
    width:100px;
    color:#000000;
}

#nav .subnav li a {
    padding:3px;
    padding-left:10px;
    display:block;
    background-color:white;
    color:#C51721;
    text-decoration: none;
    border-bottom:1px solid #DEDEDE;
}
 </style>

Если код можно улучшить, дайте мне знать. спасибо

Ответы [ 2 ]

2 голосов
/ 28 июня 2011

высота li в .subnav big .Он должен быть того же размера, что и Firefox и Chrome

Когда я проверяю его , у меня возникает противоположная проблема: IE7 слишком мал.

Кажется,быть из-за некоторых полей на li .Чтобы они были одинаковой высоты, я использовал: 

#nav .subnav li {
    padding:0px;
    float: none;
    width:100px;
    color:#000000;
    margin:0px;
}

Основная проблема заключается в том, что у вас есть встроенный элемент (<li>) с вложенным в него блочным элементом (<a>).

Вы должны исправить это, изменив <li> на блочный элемент.Но тогда у вас возникнет другая проблема, поскольку вы <a> не будете принимать всю ширину ... 

#nav .subnav li {
    padding:0px;
    float: none;
    color:#000000;
    display:block;
    width:130px;
}

Это должно приблизить вас к тому, что вы хотите.

0 голосов
/ 28 июня 2011

Убедитесь, что вы заявляете, какую версию HTML вы кодируете, с помощью тега DOCTYPE.Это гарантирует, что ни один браузер не будет работать в режиме причуд, который может изменить способ отображения вашего сайта (иначе он может сделать ваш сайт странным).

Кроме того, если вы этого еще не сделали, подумайтеиспользование сброса CSS, чтобы помочь уменьшить несоответствия браузера.Попробуйте сброс Эрика Мейера: http://meyerweb.com/eric/tools/css/reset/

...