Меню, использующие неупорядоченные списки без возврата каретки, отличаются в IE 6 - PullRequest
Новая
       12

Меню, использующие неупорядоченные списки без возврата каретки, отличаются в IE 6

2 голосов
/ 03 февраля 2009

Я прошу прощения за заголовок, я действительно не знаю лучшего способа выразить это (дайте мне знать, если у вас есть лучший способ, я его поменяю). Пожалуйста, рассмотрите следующий код: 

<html>
    <head>
        <title>IE 6 Menu Test</title>
        <style type="text/css">
            .nMenu {
                border: 1px solid black;
            }

            .nMenu ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }

            .nMenu a {
                display: block;
                padding: 3px 0px 3px 5px;
                background-color: #fff;
                border-bottom: 1px solid #eee;
                font-weight: bold;
                text-decoration: none;
            }

            .nMenu a:hover {
                background-color: #dddddd;
            }
        </style>
    </head>
    <body>
        <div class="nMenu">
            <ul>
                <li><a href="">One</a></li><li><a href="">Two</a></li><li><a href="">Three</a></li><li><a href="">Four</a></li><li><a href="">Five</a></li>
            </ul>                        
        </div>

        <hr />

        <div class="nMenu">
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
                <li><a href="">Four</a></li>
                <li><a href="">Five</a></li>
            </ul>                        
        </div>
    </body>
</html>

В Firefox верхнее и нижнее меню отображаются одинаково. Но в IE6 нижняя версия, идентичная верхней, за исключением возвратов каретки после каждого элемента списка, отображается с дополнительным заполнением над каждым элементом. Топовая версия без возврата каретки не имеет. Это особенно заметно (дополнительное заполнение) при наведении на элементы в нижнем списке.

Похоже, IE6 по какой-то причине отрисовывает возврат каретки. На данный момент мы только что прибегли к форматированию нашего кода, как в верхнем примере, но это далеко не идеально. Есть ли что-то, что мы можем добавить в CSS, чтобы это выглядело правильно в IE6?

Ответы [ 3 ]

7 голосов
/ 03 февраля 2009

Примените display: block; к li, скажите IE6 сделать ширину a 100% и скажите всем браузерам вместо a отображать как блок. 

.nMenu li {
    display: block;
}

/* hack for IE6 */
* html .nMenu a 
{
    width: 100%
}

.nMenu a {
    display: block;
    padding: 3px 0px 3px 5px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    font-weight:bold;
    text-decoration:none;
}

Попробовал в IE6, и оба списка выглядят одинаково, а в Firefox отображаются одинаково.

1 голос
/ 03 февраля 2009

У меня нет решения основной проблемы, но вы можете изменить форматирование кода, чтобы оно выглядело лучше и по-прежнему работало в IE 6. 

<div class="nMenu">
    <ul>
        <li><a href="">One</a></li
        ><li><a href="">Two</a></li
        ><li><a href="">Three</a></li
        ><li><a href="">Four</a></li
        ><li><a href="">Five</a></li>
    </ul>                                           
</div>
0 голосов
/ 03 февраля 2009

Попробуйте добавить overflow: hidden; к .nMenu li.

...