Question

我有一个页面，代码是：

<!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中查看此页面，

我认为外部div的高度为16px。但在Chrome中，外部div的高度为19px，而在Firefox中，外部div的高度为20px（来自浏览器的计算框模型视图）。

现在我想知道浏览器如何计算外部div的高度？

Answer 1

这是因为你在.text中使用了表格单元格，导致边框被分开，你似乎已经增加了高度。

只需将边框设置为在外部div中折叠：

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

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

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

浏览器如何计算DIV的高度？

1 个答案: