html - 为什么 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

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

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