Блог

Главная - Вопросы по программированию - Список меню, совместимый с IE6 / IE7

Список меню, совместимый с IE6 / IE7

#html #css #internet-explorer-7 #internet-explorer-6

#HTML #css #internet-explorer-7 #internet-explorer-6

Вопрос:

Я должен изменить HTML-страницу, потому что меню не работает с IE6 / IE7 / IE8.

HTML-код :

 <div id="menu">
    <table>
    <tr>
        <td><a href="menu1.php">Menu 1</a></td>

        <td>Menu 2
                <ul>
                    <li><a href="submenu1-1.php">Sub-menu 1</a></li>
                    <li><a href="submenu1-2.php">Sub-menu 2</a></li>
                    <li><a href="submenu1-3.php">Sub-menu 3</a></li>
                </ul>
        </td>

        <td><a href="menu3.php">Menu 3</a></td>

        <td>Menu 4
            <ul>
                    <li><a href="submenu3-1.php">Sub-menu 1</a></li>
                    <li><a href="submenu3-2.php">Sub-menu 2</a></li>
                    <li><a href="submenu3-3.php">Sub-menu 3</a></li>
            </ul>
        </td>

        <td><a href="menu5.php">Menu 5</a></td>

        <td>Menu 6
                <ul>
                    <li><a href="submenu5-1.php">Sub-menu 1</a></li>
                    <li><a href="submenu5-2.php">Sub-menu 2</a></li>
                    <li><a href="submenu5-3.php">Sub-menu 3</a></li>
                </ul>
        </td>

        <td><a href="disconnect.php">Menu 7</a></td>

    </tr>
    </table>
</div>

CSS-код :

 #menu a, #menu li, #menu td{
    color: black;
    text-decoration: none;
}

#menu a:hover{
    color: black;
}

#menu ul {
    list-style-type: square; 
    text-align:left;
}

#menu table{
    width: 100%;
    height:40px;
}

#menu td{
    border-right: 2px solid black; 
    padding-right:5px;
}

#menu td ul{
    position:absolute;
    left: -999em;
    margin-top:0px;
    border: 2px outset black;
    background: white;
}

#menu td:hover ul{

    left: auto;
}

Синтаксис с ‘td’ и ‘ul’ кажется мне немного странным. Есть ли какие-либо советы по восстановлению совместимости со старыми версиями браузеров Microsoft?

Спасибо!

Комментарии:

1. Почему вы используете таблицы? И почему вы не говорите нам, что не так? ‘Не работает’ — это немного абстрактно.

Ответ №1:

#menu td:hover ul будет работать в IE7 , если ваша страница находится в стандартном режиме.

Чтобы ваша страница использовала стандартный режим, добавьте соответствующий doctype в самую первую строку, например:

 <!DOCTYPE html>

К сожалению, это не исправит IE6, поскольку эта версия поддерживает только :hover on a элементы.

Чтобы исправить IE6 (и другие версии IE, если вы не можете добавить doctype и ваша страница должна оставаться в режиме Quirks), вы должны использовать это исправление JavaScript:

http://peterned.home.xs4all.nl/csshover.html

Большинство современных браузеров поддерживают селектор :hover для любого HTML-элемента. Это здорово, потому что позволяет, например, применять эффект наведения курсора мыши к строкам таблицы, используя только CSS. Однако IE имеет неустойчивую поддержку: в лучшем случае, наведите курсор, в зависимости от конкретной версии, используемой вашим посетителем.

Whatever: hover — это небольшой скрипт, который автоматически исправляет:hover, : active и:focus для настроек IE6, IE7 и IE8, позволяя вам использовать их так же, как в любом другом браузере.