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 Link :) 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标签不再位于导航标签内，因此未应用样式。

CSS未在Internet Exploer

1 个答案: