为什么 Chrome 不正确尊重边距？答案

【问题标题】：Why Chrome doesn't respect the margin properly?为什么 Chrome 不正确尊重边距？
【发布时间】：2014-04-15 23:03:47
【问题描述】：

我找了很久也没找到答案：/

在 Chrome（Internet Explorer、Konqueror 和许多其他）中，底部的 h1 边距添加到 .blue。但是，Firefox 正确地尊重 css 规则。

有什么建议吗？

HTML

<div class="red"><div class="blue"><h1>Hello World!</h1></div></div>

CSS

.red{
  background: red;
  /* All this contain margins */
  float:left;
  /* padding-top:1px; */
  /* display: inline-block */
  /* overflow: hidden */
}

.blue{
  background: blue;
  min-height: 60px;
}

h1{
  margin: 10px 0 20px;
  background: green;
}

基于壁虎： [我猜这个是正确的]

基于 Webkit、基于 KHTML 和 Trident shell：

CODEPEN

http://codepen.io/marquex/pen/fzsIk

【问题讨论】：

这对我来说似乎在 Chrome 中运行良好...
@jwddixon 你能补充更多信息吗？我要求检查条件的所有人都告诉我它坏了

标签： html css google-chrome margin

【解决方案1】：

您遇到的保证金问题与.blue div 中的min-height 规则有关。如果可以在 Chrome 和 Firefox 中获得相同的结果，请将其替换为 height 规则。

我不知道为什么在使用min-height 时会发生这种情况。也许是某种 Chrome 的错误。

【讨论】：

谢谢，但我无法避免最小高度

【解决方案2】：

定义你的字体，这就是问题所在，每个浏览器都有不同的默认字体设置，标题（h1...h6）分别。所以h1 中文本的实际高度会有所不同，这是导致底部/顶部边距不同的原因。

如您所见，基于 Gecko 的浏览器使用一种 Garamond 样式的字体，所有其他的默认使用 Times New Roman，当然如果用户预定义了页面的字体，有时所有浏览器的一切看起来都一样，例如：

h1{
  margin: 10px 0 20px;
  background: green;
  font-family: "Your-favorite-font", Times, sans-serif;
  font-size: 2em;
}

【讨论】：

【解决方案3】：

正在解决

经过长时间的搜索，我在 chromium repo 上报告了这个问题。他们接受它作为一个错误。所以，如果有人想知道这段历史的最终结果，可以按照修复过程here。感谢任何试图帮助我们的人，但让我补充一点，我不相信 Stackoverflow 能够看不到如此严重的错误。我有点少stackoverflowita。

【讨论】：