这是一段在 Firefox 中显示不佳的 HTML(10)
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
* { margin: 0; padding: 0; }
.block6 { float: left; margin: 0 10px; width: 460px; }
.block { position: relative; }
.block:after {
clear: both;
content: "";
display: block;
margin-bottom: 40px;
}
header { margin-bottom: 40px; }
.wie { text-align: center; }
.w {
margin: 0 auto;
padding: 0 10px;
text-align: left;
width: 960px;
}
</style>
</head>
<body>
<header>
<div class="wie">
<div class="w">
<div class="block">
<div class="block6">
aa
</div>
<div class="block6">
bb
</div>
</div> <!-- block -->
</div> <!-- w -->
</div> <!-- wie -->
</header>
</body>
</html>
问题是在顶部显示了一个“额外”空间。 如果我设置:
header {
margin-bottom: 0;
}
多余的空间消失了。 我认为错误出在 block 或 block6 类中。有什么建议吗？
在 Chrome 中显示良好。
编辑:
这是一个链接:http://jsfiddle.net/wARzA/
最佳答案
这是一个奇怪的错误，但是设置顶部边框等很多事情都会使错误消失。也许最干净的方法是这样的:
header { min-height: 1px; }
关于Firefox 上的 HTML 显示不佳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9625035/