MDN 上有一篇很好的文章解释了这些概念背后的理论： https ://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
它还解释了boundingClientRect的宽度/高度与offsetWidth/offsetHeight之间的重要概念差异。
然后，为了证明这个理论是对还是错，你需要一些测试。这就是我在这里所做的：https://github.com/lingtalfi/dimensions-cheatsheet
它正在测试 chrome53、ff49、safari9、edge13 和 ie11。
测试结果证明该理论总体上是正确的。对于测试，我创建了 3 个 div，每个 div 包含 10 个 lorem ipsum 段落。一些 CSS 应用于它们：
.div1{
width: 500px;
height: 300px;
padding: 10px;
border: 5px solid black;
overflow: auto;
}
.div2{
width: 500px;
height: 300px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box;
overflow: auto;
}
.div3{
width: 500px;
height: 300px;
padding: 10px;
border: 5px solid black;
overflow: auto;
transform: scale(0.5);
}
结果如下：
-
分区1
-
偏移宽度：530（chrome53、ff49、safari9、edge13、ie11）
-
偏移高度：330（chrome53、ff49、safari9、edge13、ie11）
-
bcr.宽度：530（chrome53、ff49、safari9、edge13、ie11）
-
bcr.高度：330（chrome53、ff49、safari9、edge13、ie11）
-
客户端宽度：505（chrome53、ff49、safari9）
-
客户端宽度：508（边缘13）
-
客户端宽度：503（即11）
-
客户端高度：320（chrome53、ff49、safari9、edge13、ie11）
-
滚动宽度：505（chrome53、safari9、ff49）
-
滚动宽度：508（边缘13）
-
滚动宽度：503（即11）
-
滚动高度：916（chrome53、safari9）
-
滚动高度：954（ff49）
-
滚动高度：922（边缘13，ie11）
-
分区2
-
偏移宽度：500（chrome53、ff49、safari9、edge13、ie11）
-
偏移高度：300（chrome53、ff49、safari9、edge13、ie11）
-
bcr.width：500（chrome53、ff49、safari9、edge13、ie11）
-
bcr.高度：300（chrome53、ff49、safari9）
-
bcr.高度：299.9999694824219（edge13，ie11）
-
客户端宽度：475（chrome53、ff49、safari9）
-
客户端宽度：478（边缘13）
-
客户端宽度：473（ie11）
-
客户端高度：290（chrome53、ff49、safari9、edge13、ie11）
-
滚动宽度：475（chrome53、safari9、ff49）
-
滚动宽度：478（边缘13）
-
滚动宽度：473（即11）
-
滚动高度：916（chrome53、safari9）
-
滚动高度：954（ff49）
-
滚动高度：922（边缘13，ie11）
-
分区3
-
偏移宽度：530（chrome53、ff49、safari9、edge13、ie11）
-
偏移高度：330（chrome53、ff49、safari9、edge13、ie11）
-
bcr.宽度：265（chrome53、ff49、safari9、edge13、ie11）
-
bcr.高度：165（chrome53、ff49、safari9、edge13、ie11）
-
客户端宽度：505（chrome53、ff49、safari9）
-
客户端宽度：508（边缘13）
-
客户端宽度：503（即11）
-
客户端高度：320（chrome53、ff49、safari9、edge13、ie11）
-
滚动宽度：505（chrome53、safari9、ff49）
-
滚动宽度：508（边缘13）
-
滚动宽度：503（即11）
-
滚动高度：916（chrome53、safari9）
-
滚动高度：954（ff49）
-
滚动高度：922（边缘13，ie11）
因此，除了edge13和ie11中boundingClientRect的高度值（299.9999694824219而不是预期的300）之外，结果证实了其背后的理论是有效的。
从那里，这是我对这些概念的定义：
- offsetWidth/offsetHeight：布局边框框的尺寸
- boundingClientRect：渲染边框的尺寸
- clientWidth/clientHeight：布局内边距框可见部分的尺寸（不包括滚动条）
- scrollWidth/scrollHeight：布局填充框的尺寸（如果不受滚动条约束）
注意：默认垂直滚动条的宽度在edge13中为12px，在chrome53、ff49和safari9中为15px，在ie11中为17px（通过截图在photoshop中测量，并通过测试结果证明正确）。
但是，在某些情况下，您的应用程序可能未使用默认的垂直滚动条宽度。
因此，考虑到这些概念的定义，垂直滚动条的宽度应该等于（伪代码）：
请注意，如果您不了解布局与渲染，请阅读 mdn 文章。
另外，如果您有其他浏览器（或者如果您想亲自查看测试结果），您可以在此处查看我的测试页面：http://codepen.io/lingtalfi/pen/BLdBdL
