浏览器是不是支持 getBoundingClientRect 的宽度和高度属性？

Posted 2023-03-31

【中文标题】浏览器是不是支持 getBoundingClientRect 的宽度和高度属性？

【英文标题】：Browser support of width and height properties of getBoundingClientRect?浏览器是否支持 getBoundingClientRect 的宽度和高度属性？

【发布时间】：2013-07-16 19:32:07

【问题描述】：

我刚刚发现并且非常喜欢getBoundingClientRect，因为它包含亚像素精度。这使我能够创建一致的对齐方式，即使用户键入 Ctrl+ 或 Ctrl+-。

它有属性top、bottom、left、right、&width&height。

在 Internet 上找到浏览器支持很简单，但对于 width 和 height 属性尤其如此。看来这是事后添加的。它适用于 Firefox、Chrome 和 IE10，但 IE8 和 IE9 呢？我不能方便地测试这些。

【问题讨论】：

能不能用IE10开发者的东西把它设置成IE8模式？ （我不确定 IE10 可以做到这一点，但 IE8 模式下的 IE9 可能会得到类似的结果。）

也是width和right - left不同吗？

“使用开发人员的东西” 过去，IE 中的 F12 工具能够准确地反映旧的 html 和 CSS 解析器，但我注意到它在旧的 javascript 解释器。

"is width 与 right-left" 不，基于我有限的测试。我仍然喜欢使用width，因为它比right-left 更短更简单。

我怀疑宽度和高度是否成功，除非 IE 首先违反规则并且每个人都复制，例如 .innerText...

【参考方案1】：

在 IE9 中作为 IE8：

document.body.getBoundingClientRect() 
[object] 
    right : 2556,
    top : 0,
    bottom : 1195,
    left : 0
 

在 IE9 中作为 IE9：

document.body.getBoundingClientRect() 
[object ClientRect] 
    bottom : 1435,
    height : 1435,
    left : 0,
    right : 2544,
    top : 0,
    width : 2544
 

所以，我会在 IE9 上说是，在 IE8 上不行...

【讨论】：

IE 7 也不支持宽度和高度。感谢 Microsoft 的 janky 编程体验！

我们发现 IE8 中的左右是整数运算，而 IE9 中的宽度可以是浮点数。如果您尝试将页面上的两个元素对齐，则半个像素可能相当大。