為什么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 。