浏览器如何计算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高度？

回答

相关问题