0

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

铬：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;
}

任何帮助将不胜感激！

4

2 回答 2

1

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

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

注意nav元素是如何自动关闭的。这意味着没有任何 CSS 规则与标记匹配。（您可以通过使用与更高版本的 IE 捆绑的开发人员工具来亲自查看 - 按 F12）

我建议通过用#menu替换对nav的引用来更改您的 CSS 规则，这应该适用于一系列 IE 版本。

于 2013-06-18T04:35:40.033 回答
1

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

如果您打算使用 HTML5，则包括 shim...

<!-- HTML5 shim -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
于 2013-06-18T05:08:02.347 回答