我正在尝试创建一个简单的搜索栏，它有一个背景，旁边有一个"高级"href。它在Chrome、Mozilla中正确呈现，但在IE 8中，href在下面的行中显示为一个单独的块？
我的HTML代码：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>FireFox HomePage</title>
<!--[if lt IE 9]>
<script src="../HTML5Shiv/dist/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="MainPage1.css" />
</head>
<body>
<header>
<div class="wrapper">
<a href="#"><img src="../../IMG/FireFox.png" alt="FireFox Logo" title="FireFox Home" /></a>
<span id="usernav"><a href="#">Logout</a><a href="#">My Profile</span>
</div>
<form action="" method="Search">
<p>
<input type="search" />
<input type="submit" value="Search"/>
<a href="#">Advanced</a>
</p>
</form>
</header>
</body>
</html>
我的CSS代码：
/* CSS Reset */
* { margin: 0; padding: 0; }
html { height: 101%; font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif; background: #fff; }
body { font-size: 62.5%; font-family: Helvetica, Arial, sans-serif; line-height: 10%; }
img { border: 0;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Main CSS */
header { width: 1000px; margin: 0 auto; clear: both;}
.wrapper { width: 1000px; margin: 0 auto; margin-top: 10px;}
#usernav { position: relative; margin-top: 20 px; font-size: 12px;}
#usernav a { color: #444; text-shadow: 0px 1px 1px #ddd; text-decoration: none; float: right; padding: 8px;}
#usernav a:hover { text-decoration: underline; }
form{background-color: #eee; border-bottom: 1px solid #dadada; height: 50px;}
/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
好的，我已经解决了这个问题。似乎移除
<span id="usernav"><a href="#">Logout</a><a href="#">My Profile</span>
从div中，并将其直接放置在头中，解决了IE错误。但不知道为什么，建议是受欢迎的。我不能发布图片，因为我没有超过10个信誉点：（