为什么Chrome不能正确尊重保证金？

Question

我搜索了很长时间，但我找不到答案：/

在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;
}

以Gecko为基础： [这个是正确的，我猜]

基于Webkit，基于KHTML和Trident shell：

CODEPEN

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

Answer 1

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

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

Answer 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;
}

Answer 3

<强> RESOLVING

经过长时间的搜索，我报道了铬回购的问题。他们接受它为 bug 。因此，如果有人想知道此历史记录的最终版本可以遵循修复过程here。 感谢任何试图帮助我们的人，但是让我补充一点，我不相信Stackoverflow能够看不到这么大的错误。我不太喜欢 stackoverflowita 。