Css 为什么我的导航显示在标题下方？_Css_Html_Positioning

Css 为什么我的导航显示在标题下方？

css html

Css 为什么我的导航显示在标题下方？,css,html,positioning,Css,Html,Positioning,这就是我的页面在几种浏览器中的外观：这就是我希望它在所有浏览器中的外观：我不知道为什么会这样。看来，不管是什么错误，Chrome和Safari都能正确地解释它。但是Opera总是在标题栏的外面（和下面）显示我的导航。Dreamweaver也将以这种方式显示它，但如果我刷新页面，它会修复它这是我的HTML： <!DOCTYPE html> <html> <head> <title>Oblique Drive</title> <

这就是我的页面在几种浏览器中的外观：
这就是我希望它在所有浏览器中的外观：

我不知道为什么会这样。看来，不管是什么错误，Chrome和Safari都能正确地解释它。但是Opera总是在标题栏的外面（和下面）显示我的导航。Dreamweaver也将以这种方式显示它，但如果我刷新页面，它会修复它

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<title>Oblique Drive</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<header>
    <div class="headwrap"><img src="images/logo.png" width="177" height="50" alt="Logo">
    <nav>
    <ul>
        <li><a href="index.html" class="selected">HOME</a></li>
        <li><a href="technology.html">TECHNOLOGY</a></li>
        <li><a href="products.html">PRODUCTS</a></li>
        <li><a href="company.html">COMPANY</a></li>
        <li><a href="#">OTHER</a></li>
        <li><a href="#">RANDOM</a></li>
    </ul>
    </nav>
    </div>
</header>


<div class="pagewrap">

</div>


</body>
</html>

我花了一整天的时间试图弄明白这一点，当我最后把问题贴在这里的时候，我在2分钟后找到了答案。如果其他任何人有这个问题，或者任何涉及html5“header”和/或“nav”标记的问题，那就是html5解释问题。不要将CSS中的属性简单地分配给“header”和/或“nav”，而是将句点放在前面，使其成为类。在你的html中，给那些标签它们各自的类，也就是说，代替，使用。不应该有任何像这样的“HTML5解释问题”。对于所有理解HTML5标签的浏览器来说，标签选择器应该可以工作。可能是选择器的特殊性问题，或者仅仅是输入错误？此外，您的HTML原样在我的浏览器中显示良好（导航栏位于行上方）。

body {
    margin: 0;
    padding: 0;
    background-color: #eeeeee;
}

header {
    width: 100%;
    height: 75px;
    position: fixed;
    display: block;
    top: 0px;
    background-color: #fcfcfc;
    -webkit-box-shadow: 0px 1px 5px 0px #7a7a7a;
    -moz-box-shadow: 0px 1px 5px 0px #7a7a7a;
    box-shadow: 0px 1px 5px 0px #7a7a7a;
}

.headwrap {
    width: 1000px;
    margin: auto;
    margin-top: 13px;
}

.logo {
    height: 50px;
    width: 147px;
}

nav {
    width: 750px;
    float: right;
    color: #000;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin-top: 8px;
}

ul {
    list-style: none;
    float: right;
}

li {
    float: left;
    padding-left: 20px;

}

li a {
    color: #000;
    padding-left: 40px;
    text-decoration: none;
}

li a:hover {
    text-decoration: underline;
}

li a:visited {

}

.pagewrap {
    display: block;
    width: 1050px;
    height: 1500px;
    margin: auto;
    background-color: #fcfcfc;
    margin-top: 67px;
}

hr {
    border: none;
    background-color: #eee;
    height: 3px;
    display: inline-block;
    width: 100%;
    padding-top: 1px;
}