我有一个页面，代码是:
<!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(从浏览器的计算框模型 View )。
现在我想知道浏览器如何计算外部 div 的高度？
最佳答案
这是因为你在 .text 中使用了 table-cell 导致边框被分开并且你似乎增加了高度。
只需将边框设置为折叠在外部 div 中:
.outer {
cursor: pointer;
border-collapse: collapse;
display: table;
}
或者，您可以只使用 display:inline-block 到您的 .text
.text {
display: inline-block;
vertical-align: middle;
height: 16px;
}
关于html - 浏览器如何计算 DIV 高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25615585/