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 span的位置和颜色可以正常工作，但在IE中它应用了最高的父选择器a {}。这对我来说没有意义，我如何在包括IE

在内的所有浏览器中使位置和颜色适用于范围

Answer 1

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

Answer 2

由于<nav>是HTML5元素，因此IE6到8无法识别它。您的样式不会应用于它无法识别为真正DOM元素的元素。

您需要使用诸如HTML5 shiv之类的内容告知IE HTML5元素的存在。

我唯一的问题是，如果JS被禁用，IE中会发生什么？

我认为你当时几乎搞砸了。

IE锚点选择器继承

2 个答案: