为什么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;
}

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

基于Webkit，基于KHTML和Trident的shell：

CODEPEN

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

Answer 1

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

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

Answer 2

定义字体，这就是问题所在，每个浏览器对默认字体，标题（h1 ... h6）都有不同的设置。 因此， h1本的实际高度将有所不同， 这是导致bottom / top的边距不同的原因 。

如您所见，基于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

解决

经过长时间的搜索，我报告了有关铬回购的问题。 并且他们接受它作为错误 。 因此，如果任何人想知道此历史记录的最终版本，都可以按照此处的修复过程进行操作。 感谢所有尝试帮助我们的人，但我要补充一点，我不认为Stackoverflow看不到如此严重的错误。 我少了stackoverflowita 。