Question

好的，所以我知道这里有一些类似的问题，但我似乎无法解决我读到的解决方案的问题。我正在创建一个新网站，菜单在Chrome和Firefox中水平显示，但它在旧版Internet Explorer中或在Internet Explorer兼容模式下垂直显示。以下是要比较的屏幕截图：

Chrome：http://imgur.com/ZQVKGya

Internet Explorer（兼容模式）：http://imgur.com/Q3z6VzW

不仅菜单看起来很破碎，而且有些东西看起来错了。修复菜单将是一个很好的起点。

以下是HTML代码：

<div id="menu">
    <nav>
        <ul>
            <li>Home</li>
            <li>Tires
                <ul>
                    <li>Utility
                        <ul>
                            <li>Gripper</li>
                            <li>Radical</li>
                        </ul>
                    </li>
                    <li>Sport
                        <ul>
                            <li>Race-X</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Contact
                <ul>
                    <li>About us</li>
                    <li>Contact us</li>
                </ul>
            </li>
            <li>Dealers
                <ul>
                    <li>Locate a dealer</li>
                    <li>Become a dealer</li>
                </ul>
            </li>
            <li>Downloads</li>
        </ul>
    </nav>
</div>

这是CSS代码：

#menu {
    height: 40px;
    width: 960px;
    text-align: center;
    line-height: 40px;
    color: #FFF;
    float: left;
    -webkit-box-shadow: 0 5px 10px -2px #888;
    -moz-box-shadow: 0 5px 10px -2px #888;
    box-shadow: 0 5px 10px -2px #888;
    border-bottom: 1px solid #000;
    background: #333;
    font-family: 'Gill Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    background: #333;
    background: linear-gradient(top, #000 0%, #4B4B4B 100%);  
    background: -moz-linear-gradient(top, #000 0%, #4B4B4B 100%); 
    background: -webkit-linear-gradient(top, #000 0%, #4B4B4B 100%); 
    -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

nav ul:after {
    content: ""; 
    clear: both; 
    display: block;
}

nav ul li {
    width: 20%;
    background: #333;
    -webkit-box-shadow: inset 0 0 1px #000;
    -moz-box-shadow: inset 0 0 1px #000;
    box-shadow: inset 0 0 1px #000;
    float: left;
}

nav ul li:hover {
    -webkit-box-shadow: inset 0 0 30px #000;
    -moz-box-shadow: inset 0 0 30px #000;
    box-shadow: inset 0 0 30px #000;
}

nav ul li.active {
    -webkit-box-shadow: inset 0 0 30px #000;
    -moz-box-shadow: inset 0 0 30px #000;
    box-shadow: inset 0 0 30px #000;
}

nav ul li a {
    display: block; 
    color: #FFF;
    text-decoration: none;
}

nav ul ul {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    width: 20%;
    background: #333;
    padding: 0;
    position: absolute;
    display: none;
    top: 100%;
}

nav ul ul li {
    width: 100%;
    float: none; 
    border-bottom: 1px solid #494949;
    position: relative;
}

nav ul ul li:hover {
    -webkit-box-shadow: inset 0 0 0 #868686;
    -moz-box-shadow: inset 0 0 0 #868686;
    box-shadow: inset 0 0 0 #868686;
    background: #868686;
    color: #FFF;
}

nav ul ul li a {
    line-height: 35px;
    height: 35px;
}   

nav ul ul li a:hover {
    background: #868686;
}

nav ul ul ul {
    width: 100%;
    position: absolute; 
    left: 100%; 
    top:0;
}

非常感谢任何帮助！

Answer 1

看起来IE无法识别 nav 元素。兼容模式下的IE解释标记如下：

<div id="menu">
    <nav />
        <ul>
            <li>Home</li>
            ...
        </ul>
</div>

注意 nav 元素是如何自行关闭的。这意味着您的CSS规则都不匹配标记。（您可以使用与更高版本的IE捆绑在一起的开发人员工具自行查看 - 按F12键）

我建议您使用 #menu 替换对 nav 的引用来更改CSS规则，这应该适用于各种IE版本。

Answer 2

要添加上面的正确答案......

如果您打算使用HTML5，请添加垫片...

<!-- HTML5 shim -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

水平菜单在Internet Explorer中垂直显示

2 个答案: