список не отображает встроенный IE?

Question

Приведенный ниже код отлично работает в 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 по-прежнему отображаются маркеры?

Answer 1

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

Answer 2

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

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

Answer 3

#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;  
}