Список меню, совместимый с IE6 / IE7 - PullRequest
Новая
       39

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

1 голос
/ 09 июня 2011

Мне нужно изменить 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 Ответ

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

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

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

<!DOCTYPE html>

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

Для исправления IE6 (и других версий IE, если выневозможно добавить тип документа, и ваша страница должна оставаться в режиме «Причуды»), вам следует использовать это исправление JavaScript:

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

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

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

...