getBoundingClientRect() 如何与 box-ssize 交互

Question

所以jQuery的.width()总是返回clientWidth，不管它是什么。但是如果你想要子像素精度，你必须选择getBoundingClientRect。

我的问题是一个跨浏览器的问题。假设我想使用 getBoundingClientRects（） 或 getBoundingClientRect（）。在当今使用的所有主流浏览器中（即至少 95% 的人使用的浏览器），它们是否返回工作区的宽度，即本质上是element.clientWidth，而不管框的大小如何？或者如果元素有box-sizing: border-box，我是否必须减去填充？就此而言，如何获取填充和边距的子像素值？

我正在寻找一个关于当今使用的主要浏览器行为的答案。

Answer 1

来自 MDN ： _强调我的

返回值是一个DOMRect对象，它是元素getClientRects()返回的矩形的联合，即与元素关联的 CSS 边框框。

因此，

此方法确实返回边框框，因此不应受到 box-sizing 属性的任何影响。

因此，返回的 DOMRect 的width和height值将与offsetWidth和offsetHeight属性返回的值相同，只是这些值稍后是舍入的。

---

我只能说这是规范要求 UA 实现的。我不知道不同的实现有何不同。IIRC，getBoundingClientRect的一些早期实现也确实对width值进行了舍入和height值，但我不知道这种有缺陷的实现的浏览器使用情况。