IE中不可能有适当的固定导航?

时间:2015-12-13 21:34:31

标签: css internet-explorer

我的导航已固定在页面顶部。然后我在下面有内容。 IE是垃圾,z-index没有跟随。这是针对当前版本的IE。

<body>
    <nav>
        <div id="logo"></div>
        <div id='menu'>
            <p data-menuanchor='Home'><a href="http://satprepget800.com/#Home">Home</a></p>

            <p data-menuanchor='Resources'><a href="http://satprepget800.com/#Resources">Resources</a></p

            <p data-menuanchor='About'><a href="http://satprepget800.com/#About">About</a></p>

            <p data-menuanchor='Contact'><a href="http://satprepget800.com/#Contact">Contact</a></p>

            <p><a href="books/">Books</a></p>

            <p><a href="blog/">Blog</a></p>
        </div>
        <div id='social'>
            <a class="desktop" href="https://www.facebook.com/SATPrepGet800" target="_blank"><img class="desktop" src="../wp-content/themes/Get 800/img/facebookIcon.png"></a>

            <a class="desktop" href="https://twitter.com/satprepget800" target="_blank"><img class="desktop" src="../wp-content/themes/Get 800/img/twitterIcon.png"></a>

            <img id='share' src="../wp-content/themes/Get 800/img/shareIcon.png">

        </div>
    </nav>

    <div id='postContainer'>    

            <div class="row "><div class="six columns "><p></p>
            <h3 style="text-align: center;"><b>SAT Math Overview</b></h3>
            <div class="video-container" style="text-align: center;"><iframe src="//www.youtube.com/embed/5ZdRJz0WSHM?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

帖子容器包含iframe视频..

nav {
 background-color: #01235f;
 width: 100%;
 height: 10%;
 top: 0;
 position: fixed;
 z-index: 9; }

#postContainer {
 width:70%; 
 margin: auto; 
 margin-top: 10%; 
 font-family: Calibri, sans-serif;
 font-size: 22px;
 z-index: -1;
 position: relative;
}

为什么这不起作用。其他所有浏览器都有效。

1 个答案:

答案 0 :(得分:0)

IE 支持这些功能。

如果您没有看到它正常工作,我的猜测是该页面正在以Quirks模式呈现。此模式将IE置于IE5兼容模式,这会消耗大量浏览器功能。

您可以通过打开开发工具(按F12)来检查浏览器模式,然后转到“模拟选项卡”。如果浏览器模式显示“5”,那么它就是怪癖模式。解决这个问题将解决您的问题。

如果出现此问题,您可以通过确保HTML代码有效来解决此问题。最常见的原因是您尚未指定DOCTYPE,但问题中的代码也缺少<html>标记和整个<head>部分以及DOCTYPE。您需要添加所有这些以使其重视HTML并使其正确呈现。