今天我遇到了这段代码。它在 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>
我还可以在页眉 block 后添加一些文本，这对 Firefox 也适用。
我不明白为什么 Firefox 会在标题元素中添加边距。
最佳答案
关于html - Firefox 在错误的元素上添加边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18889123/