html - CSS 未在 Internet Explorer 中显示

Question

我一直在用 HTML 和 CSS 开发一个元素，但是 IE 没有显示我的任何样式。 我不确定为什么我的导航没有显示 - 它只是显示为一个简单的列表。 一些帮助将不胜感激!

我的 CSS 是一个外部样式表:

 <style>

    header {
    background: url(milo.png);
    background-position:center;
    border-radius: 15px 50px;
    margin: auto;
    margin-top:1em;
    height: 140px;
    width: 140px;
    border:2px dotted;
    padding: 30px;
 }

h1 {    font-family: "Courier New";
    font-weight:bold;
    font-size:24px;
    text-align:center;
    padding: 40px;}

div {
    background-color:#8B7C9D;
    padding:1em; }  

body{
    padding: 5px;
    font-size: 15px;
    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    display: block;
    margin: 0;
    overflow: hidden;
    text-align:center;
}
nav ul{
    margin: 0;
    padding: 0;
    list-style: none;

}
nav ul li {
    margin: 0;
    display: inline-block;
    list-style-type: none;
    transition: all 0.2s;
}

nav > ul > li > a {
    color: #aaa;
    display: block;
    line-height: 2em;
    padding: 0.5em 2em;
    text-decoration: none;

}

nav li > ul{
    display : none;
    margin-top:1px;
    background-color: #bbb;

}

nav li > ul li{
    display: block;
    text-align:left;
}

nav  li > ul li a {
    color: #111;
    display: block;
    line-height: 2em;
    padding: 0.5em 2em;
    text-decoration: none;
}

nav li:hover {
    background-color: #C4C4C4;
}
nav li:hover > ul{
    position:absolute;
    display : block;
}


nav ul > li.sub{
    background: url(Arrow.png) right center no-repeat;
}


</style>

抱歉，我对整个 stackoverflow 团队还很陌生。 这是 JSFiddle 链接 :) https://jsfiddle.net/jskk00ch/

Answer 1

看起来 Internet Explorer 不允许标签内有标签。当我在 IE 中使用这个 HTML 时:

<nav><ul><li>test</li></ul></nav>

IE 的 DOM Explorer 显示为:

<nav></nav>
<ul><li>test</li></ul>
</nav><//nav>

样式没有被应用，因为 ul 标签不再在 nav 标签内。