瀏覽器如何計算DIV高度？

我有一個頁面，代碼：瀏覽器如何計算DIV高度？

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <style> 
     body { 
      font-size: 0.625em; 
     } 
     .outer { 
      cursor: pointer; 
     } 
     .text { 
      display: table-cell; 
      vertical-align: middle; 
      height: 16px; 
     } 
     .text-wrapper { 
      display: inline-block; 
     } 
    </style> 
</head> 
<body> 
<div class="outer"> 
    <div class="text-wrapper"> 
     <div class="text">Search Now</div> 
    </div> 
</div> 
</body> 
</html>

我瀏覽這個頁面在Chrome和Firefox，

，我asume，外部div的高度是16像素。但在Chrome中，外部div的高度是19px，在Firefox中，外部div的高度是20px（從瀏覽器的計算框模型視圖）。

現在我想知道瀏覽器如何計算外部div的高度？

來源

2014-09-02 woodslee

答案問將是一般性的問題CSS規範的一部分的一個長而複雜的釋義。這對於SO來說太寬泛了。你似乎真的有一個更具體的問題，但你沒有明確地問。 – 2014-09-02 05:00:46

這是因爲您使用.text中的表格單元格導致邊框被分開，並且您似乎已經增加了高度。要癱倒在外層div

只需設置邊框：

.outer { 
    cursor: pointer; 
    border-collapse: collapse; 
    display: table; 
}

或者，你可以用display:inline-block您.text

.text { 
    display: inline-block; 
    vertical-align: middle; 
    height: 16px; 
}

來源

2014-09-02 03:59:01

替代解決方案有效，但第一個解決方案不起作用，除非您另外在中間元素中創建一行：'.text-wrapper {display：table-row;}'。 – 2014-09-02 04:57:36

瀏覽器如何計算DIV高度？

回答

相關問題