css - IE anchor 选择器继承

Question

我有一些基本结构的html

<nav>
     <div>
    <a href="">
        <div class="navlink" data-link="home">
            <span class="top"></span>
        </div>
    </a>
    <div id="index-03"></div>
    <a href="">
        <div class="navlink" data-link="resume">
            <span class="top"></span>
        </div>
    </a>
        ...
     </div>
</nav>

像这样的 CSS

a {
    color: #000;
}

div.navlink span {
    background: red;
}

nav {
    position: relative;
    margin: auto;
    width: 1000px;
    right: 35px;
    color: #fff;
}

nav span {
    margin:auto;
    text-align: center;
    position: absolute;
    width: 100%;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

nav span.top {
    top: 45%;
    font-size: 24px;
    color: #fff;
    z-index: 50;
}

nav span.bottom {
    top: 41%;
    font-size: 16px;
    z-index: 50;
    color: #fff;
}

.navlink:hover {
    cursor: pointer;
    z-index: 50;


   color: #fff;
}

在我可以测试的每个浏览器中，除了 IE 6-8 之外，.navlink 跨度的位置和颜色有效，但在 IE 中，它应用最高父选择器 a {}。这对我来说没有意义如何使位置和颜色应用于包括 IE 在内的所有浏览器中的跨度

Answer 1

IE 6-8 不支持 <nav>标签。您必须使用 javascript 代码，例如 this启用新 html5 标签的样式或坚持使用 div 标签。