html - 兼容IE6/IE7的菜单列表

标签 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 浏览器的兼容性?

谢谢!

最佳答案

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

要使您的页面使用标准模式,请添加适当的文档类型作为第一行,例如:

<!DOCTYPE html>

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

要修复 IE6(以及其他版本的 IE,如果你不能添加文档类型并且你的页面必须保持在 Quirks 模式),你应该使用这个 JavaScript 修复:

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

Most modern browsers support the :hover selector for any html element. This is cool, because it enables you to, for instance, apply a mouseover effect to table rows using only CSS. IE however, has an erratic support for :hover at best, depending on the particular version your visitor is using.

Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser.

关于html - 兼容IE6/IE7的菜单列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6293439/

相关文章:

html - 滚动时修复标题位置

PHP 单选按钮 - 在出错后保留表单中的值

javascript - 我想做一个步进组件

html - 带有解析为 false 的媒体查询的链接标签是否仍会被下载?

html - 从某个数字开始列表

css - 如何在彩色文本上剪辑背景(仅在 css 中)

css - 在不影响边距或尺寸的情况下将文本居中放置在 div 中?

javascript - 如何摆脱 Internet Explorer 7 在片段更改时重新加载

css - 为什么我不能清除 :left these labels in IE7?

javascript - 'var' 为 null 或不是对象