今天我遇到了这段代码。它可以像我在Chrome中所期望的那样工作,但它在Firefox上添加了一个错误元素的边距:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Site Title</title>
<style type="text/css" media="screen">
body {
background-color: #aaa;
margin: 0;
}
#header {
background-color: #fff;
}
#logo {
float: left;
}
#menu {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
.main {
margin-top: 36px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
<div class="container main">
Content
</div>
</body>
</html>
Firefox似乎将.main规则中的边距添加到预期的内容div中,也添加到标题div中。
如果我在标题中添加一些文本,它将按预期工作,标题将没有该边距:
<div id="header"> Some text here
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
</div>
我还可以在标题块之后添加一些文本,它也可以用于Firefox。
我无法弄清楚为什么Firefox会将这个边距添加到标题元素中。
答案 0 :(得分:0)
答案 1 :(得分:0)
问题与具有自动高度和浮动儿童的容器有关......
将display:inline-block;
添加到#header
将使其在每个浏览器中都有效(除了旧IE之外),将在白框中包含右浮动div(现在不是),并且将继续自动调整高度。