Internet Explorer 中的 CSS 悬停下拉菜单答案

【问题标题】：CSS hover drop-down menu in Internet ExplorerInternet Explorer 中的 CSS 悬停下拉菜单
【发布时间】：2011-04-04 22:12:30
【问题描述】：

尝试创建一个在 Internet Explorer 中看起来和在 Firefox 中一样好的网站是一项非常困难的任务。然而，IE 中至少有一个错误让我们的团队特别困惑。下拉菜单在 Firefox 和 Chrome 中显示正常，但在资源管理器中看起来完全不正常。

此图分别显示了在 Firefox 和 Explorer 中浏览时菜单的外观。请点击链接查看图片。

http://i1025.photobucket.com/albums/y315/brycewwilson/firefox-explorerscreenshot.png

请帮忙！有没有其他人在尝试使用 CSS 格式的菜单时遇到过这个问题？菜单使用无序列表和列表项，并使用 CSS hover 来显示子菜单内容。

提前致谢！

更新：出于某种原因，该菜单在 IE 中独立运行，但在我们的网站上仍然无法运行。令人费解...

这里是代码。

html如下：

<head>
<link rel="stylesheet" type="text/css" href="old_hover_menu.css"/>
</head>
<body>
<ul id="topDropDownMenu">
<li id="aboutDropDown"><a href="#">About</a>
</li>
<li id="contactDropDown"><a href="#">Contact</a>
<ul>
<li><a href="#">Form</a></li>
<li><a href="#">Information</a></li>
</ul>
</li>
</ul>
</body>

这里是css：

#topDropDownMenu {position:relative;background: no-repeat 100% 50%;width:50em;max-width:100%;float:left;}

#topDropDownMenu li ul {
    width:11em !important;/* leaves room for padding */
    cursor:default;
    position:absolute;
    height:auto;
    display:none;
    left:-10px;
    padding:1px 10px 10px 10px;
    background:url(/img/clear.gif);
}
/* All LIs */
#topDropDownMenu li {
    position:relative;
    width:8.3em;
    max-width:16.5%;
    cursor:pointer;
    float:left;
    list-style-type:none;
    font-weight:bold;
        border-style:solid;
        border-width:1px;
    border-color:#222;
    text-align:center;
        -moz-border-radius:8px 8px 0px 0px;
}
/* sub-menu LIs */
#topDropDownMenu li ul li {
    width:8.3em/*FF*/;
    padding:0;
    border:none;
    max-width:100%;
    border:1px solid #333;
    border-top:none;
        -moz-border-radius:0px 0px 0px 0px;
}
/* All anchors */
#topDropDownMenu li a {
    cursor:pointer !important;
    color:#666;
    text-decoration:none;
    display:block;
    float:left;
    height:2em;
    line-height:2em;
    width:100%;
        -moz-border-radius:8px 8px 0px 0px;
}
/* sub-menu Anchors */
#topDropDownMenu li ul li a {
    width:8.3em/*FF*/;
    position:relative !important;
    cursor:pointer !important;
    white-space:nowrap;
    line-height:1.7em;
    height:1.7em;
    font-weight:normal;
    color:#666;
    background-position:0 50% !important;
        -moz-border-radius:0px 0px 0px 0px;
}
/*hover*/
#topDropDownMenu li a:hover,
#topDropDownMenu li a:focus,
#topDropDownMenu li a:active {color:#000;background:#fff}
/* display and z-index for the sub-menus */
#topDropDownMenu li:hover ul,
#topDropDownMenu li.msieFix ul  {display:block;z-index:10;top:2em !important;}
#topDropDownMenu li#aboutDropDown {z-index:2;}
#topDropDownMenu li#contactDropDown {z-index:1;}

.aboutDropDown #topDropDownMenu li#aboutDropDown ul,
.contactDropDown #topDropDownMenu li#contactDropDown ul {  display:block;top:-1000px}
#aboutDropDown a {background-color:#b9e075;}
#contactDropDown a {background-color:#f7c472;}

#topDropDownMenu li.msieFix a {}

.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus,
.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active,
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus,
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:active,
{position:absolute !important;top:1028px !important;}

【问题讨论】：

欢迎来到web开发，IE很快就会成为你的祸根。此外，如果我们能够提供帮助，一些 CSS 和 HTML 也会有所帮助。
请提供一些我们可以调试的代码。仅从屏幕截图来看，我们可能无法为您提供帮助。

标签： html css internet-explorer

【解决方案1】：

这几乎不能算作答案，但它可能会有所帮助。

当您使用完全自定义的解决方案时，跨浏览器兼容性可能会有点像这样的怪物。这是一个例子，使用像 jquery UI 这样的库会让你更轻松，因为它们通常已经跨浏览器兼容。

如果这不是一个选项，那么在没有看到您的代码的情况下将无法提供帮助。您正在使用哪个版本的 Internet Explorer 进行测试？

【讨论】：

【解决方案2】：

如果没有看到一些 HTML 和 CSS，就无法为您提供特定的解决方案。但是，有一些技术可以用来帮助缓解 IE 错误。

浮动您的<li>s，即使它们不是水平的。
将display: inline 添加到现在浮动的<li>s。
将width 分配给您的<li>s 或其中的<a> 标记。
可能会将position: relative 添加到<li>s。
将display: block 添加到<li>s 内的<a> 标记中。
将width: 100% 或zoom: 1（或任何其他触发hasLayout）添加到顶级<ul>。

上面的一些技巧通常会让你处于一个更好的位置。可能需要进一步的调整，但希望 IE 会表现得更好。

【讨论】：

谢谢！如果你们不介意看一下代码，代码就已经上线了。
另外添加 DOCTYPE 有助于修复 issues I was having with IE

【解决方案3】：

我也喜欢自己编写所有代码，但 HTML/CSS/JS 导航是您真正不需要重新发明轮子的领域之一。无论您希望它是什么样子，都有大量已经过跨浏览器测试的现成解决方案。 Suckerfish 是一种流行的纯 html/css 解决方案，但还有更多可以正常工作并且可以轻松设计为您想要的样式。（请确保设置正确元素的样式）

【讨论】：

【解决方案4】：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
        #topDropDownMenu {
            position: relative;
            background: no-repeat 100% 50%;
            width: 50em;
            max-width: 100%;
            float: left;
        }

            #topDropDownMenu li ul {
                width: 11em !important; /* leaves room for padding */
                cursor: default;
                position: absolute;
                height: auto;
                display: none;
                left: -10px;
                padding: 1px 10px 10px 10px;
                background: url(/img/clear.gif);
            }
            /* All LIs */

            #topDropDownMenu li {
                position: relative;
                width: 8.3em;
                max-width: 16.5%;
                cursor: pointer;
                float: left;
                list-style-type: none;
                font-weight: bold;
                border-style: solid;
                border-width: 1px;
                border-color: #222;
                text-align: center;
                -moz-border-radius: 8px 8px 0px 0px;
            }
                /* sub-menu LIs */

                #topDropDownMenu li ul li {
                    width: 8.3em /*FF*/;
                    padding: 0;
                    border: none;
                    max-width: 100%;
                    border: 1px solid #333;
                    border-top: none;
                    -moz-border-radius: 0px 0px 0px 0px;
                }
                /* All anchors */

                #topDropDownMenu li a {
                    cursor: pointer !important;
                    color: #666;
                    text-decoration: none;
                    display: block;
                    float: left;
                    height: 2em;
                    line-height: 2em;
                    width: 100%;
                    -moz-border-radius: 8px 8px 0px 0px;
                }
                /* sub-menu Anchors */

                #topDropDownMenu li ul li a {
                    width: 8.3em /*FF*/;
                    position: relative !important;
                    cursor: pointer !important;
                    white-space: nowrap;
                    line-height: 1.7em;
                    height: 1.7em;
                    font-weight: normal;
                    color: #666;
                    background-position: 0 50% !important;
                    -moz-border-radius: 0px 0px 0px 0px;
                }
                /*hover*/

                #topDropDownMenu li a:hover, #topDropDownMenu li a:focus, #topDropDownMenu li a:active {
                    color: #000;
                    background: #fff;
                }
                /* display and z-index for the sub-menus */

                #topDropDownMenu li:hover ul, #topDropDownMenu li.msieFix ul {
                    display: block;
                    z-index: 10;
                    top: 2em !important;
                }

                #topDropDownMenu li#aboutDropDown {
                    z-index: 2;
                }

                #topDropDownMenu li#contactDropDown {
                    z-index: 1;
                }

        .aboutDropDown #topDropDownMenu li#aboutDropDown ul, .contactDropDown #topDropDownMenu li#contactDropDown ul {
            display: block;
            top: -1000px;
        }

        #aboutDropDown a {
            background-color: #b9e075;
        }

        #contactDropDown a {
            background-color: #f7c472;
        }

        #topDropDownMenu li.msieFix a {
        }

        .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus, .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:active, {
            position: absolute !important;
            top: 1028px !important;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="old_hover_menu.css" />
</head>
<body>
    <ul id="topDropDownMenu">
        <li id="aboutDropDown"><a href="#">About</a></li>
        <li id="contactDropDown"><a href="#">Contact</a><ul>
            <li><a href="#">Form</a></li>
            <li><a href="#">Information</a></li>
        </ul>
        </li>
    </ul>
</body>
</body></html>

【讨论】：

您好 doowan，您可以考虑改进答案的格式。您可以在sandbox 中测试格式
修复了他/她的菜单
查看编辑帮助（了解更多）。如果您的代码已在编辑器中预先格式化，请将其粘贴，全选，然后使用 CTRL + K。