Question

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

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

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

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

提前致谢！

更新：出于某种原因，菜单在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;}

Answer 1

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

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

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

Answer 2

我也喜欢自己编码，但HTML / CSS / JS导航是你真正不需要重新发明轮子的领域之一。无论你想要它看起来像什么，有很多准备好的解决方案，已经测试过跨浏览器。 Suckerfish是纯粹的html / css解决方案的流行产品，但还有更多可以正常使用的产品，并且可以根据需要轻松设计外观。（只需确保设计正确的元素）

Answer 3

<!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>

Answer 4

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

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

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

Internet Explorer中的CSS悬停下拉菜单

4 个答案: