极客观点
项目管理
HarmonyOS
这是两个简单得几乎不能再简单的块块了
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>DEBUG</title>
<style>
body {
margin: 0;
}
header {
height: 32px;
padding: 16px;
background-color: #9c27b0;
}
div {
width: 32px;
height: 32px;
background: rgba(0,0,0,.1);
}
</style></head><body>
<header><div id="BUG"></div></header>
<script>
var BUG = document.getElementById("BUG");
console.log(BUG.clientHeight);
</script>
</body></html>就是出了问题
1.运行这个网页，打开你的控制台。
咳咳…
事实是 #BUG 的clientWidth和clientHeight都多了1px。若是 header 的padding为0就正常。问题不在于 header 是个header。
元素框图是正常的
2.
如果在 #BUG(block/inline-block) 之前/之后加 块级/内联，会有不同结果。例如，在 #BUG(inline-block) 之后加一个块级，#BUG的margin超过2.08333315120803…px，则clientHeight正常。
3.
多的这1px多在 #BUG 底部和右部。从 “有时 #BUG(overflow: hidden) 内容溢出时色彩无法覆盖这1px” 看出。同时从中知道 这是个 BUG ？
非常情况下浏览器的表现（#BUG::before 宽高200%，半透明，中心与 #BUG 中心重合，以及其他神奇的CSS和JS。此为JS完成 ::before 的opacity从0到1之后的某一断点）
注：Chrome 缩放自定义120%，默认缩放值则无问题。
chrome