兼容 IE6/IE7 的菜单列表答案

【问题标题】：Menu list compatible with IE6/IE7兼容 IE6/IE7 的菜单列表
【发布时间】：2014-01-15 01:14:13
【问题描述】：

我必须修改一个 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 浏览器的兼容性？

谢谢！

【问题讨论】：

你为什么使用表格？你为什么不告诉我们出了什么问题？ “不工作”有点抽象。

标签： html css internet-explorer-7 internet-explorer-6

【解决方案1】：

如果您的页面处于标准模式，#menu td:hover ul 将在 IE7+ 中运行。

要使您的页面使用标准模式，请在第一行添加适当的文档类型，例如：

<!DOCTYPE html>

不幸的是，这不会修复 IE6，因为该版本仅支持 a 元素上的 :hover。

要修复 IE6（以及其他版本的 IE，如果您无法添加文档类型并且您的页面必须保持 Quirks 模式），您应该使用此 JavaScript 修复：

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

大多数现代浏览器都支持 :hover 任何 html 元素的选择器。这很酷，因为它可以让你例如，应用鼠标悬停仅使用对表行的影响 CSS。然而，IE 有一个不稳定的最多支持 :hover ，具体取决于在您的访问者的特定版本上正在使用。

Whatever:hover 是一个小脚本自动修补 :hover, :active 和 :focus 用于 IE6、IE7 和 IE8 怪癖，让你像你一样使用它们将在任何其他浏览器中。

【讨论】：