Вопрос

Приведенный ниже код отлично работает в Firefox, но список не отображается в IE.

<div id="nav">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>

CSS:

#nav
{
    width: 800px;
    padding: 0px; 
    margin: 0 auto; 
    list-style-type: none;  
}

#nav ul li a 
{
    font-size: 18px;    
    text-decoration: none;   
    text-align: center;  
    color: #ffffff;   
    background-color: #003366;   
    padding: 20px;
    list-style: none;
    float: left; 
    list-style-type: none; 
    line-height: 5px; 
    display: inline; 
    margin-left: 5px; 
}

#nav ul li a:hover 
{
    background-color: #ccc;
}

Также в IE все еще отображаются пункты списка?

Это было полезно?

Решение

#nav
{
    width: 800px;
    padding: 0px; 
    margin: 0 auto; 
    list-style-type: none;  
}

#nav ul li
{
    text-align: center;  
    background-color: #003366;   
    list-style: none;
    list-style-type: none; 
    margin-left: 5px; 
    display: inline; 
    float: left; 
}

#nav ul li a 
{
    font-size: 18px;    
    text-decoration: none;   
    color: #ffffff;   
    line-height: 5px; 
    padding: 20px;
    display: inline-block; 
}

#nav ul li a:hover
{
    background-color: #ccc;  
}

Другие советы

Я думаю, ваша проблема в том, что вы поместили CSS в #nav ul li a, а он должен быть в элементе #nav ul li a.

Проверять Эта статья за очень хорошее объяснение оформления списка.Раздел о встроенных списках должен представлять для вас особый интерес.

Вы помещаете тип списка в свой div, но не в свой элемент ul.list-style-type не наследуется от элементов, не входящих в список, в IE.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top