Question

问题：getBoundingClientRect或window.getComputedStyle是否存在width和height不同的情况？

当元素有width box-sizing返回错误的值时，我刚刚在IE中发现了一个不一致的window.getComputedStyle（见下文）。

所以我考虑用width覆盖height和getBoundingClientRect，但不确定是否会出现失败的情况。

var box = document.querySelector('.box');
var gBCR_width = box.getBoundingClientRect().width; // always 200
var wGCS = window.getComputedStyle(box).width; // 200 some browsers, 160 in IE

Answer 1

在IE中，CSS padding: 10px;会导致溢出，并为您提供computeStyle的额外大小..

IE也会与对象分开计算Borders。

这总结了40px

之差的答案

现在使用overflow:hidden; OR box-sizing: border-box;导致值变为负值，因此将变为200px - 40px = 160px。

注意：如果我们移除overflow:hidden，则box-sizing:border-box不会产生任何差异，因为Border:0px导致设计不会从定义的高度和宽度进一步增长。

我生成了另一个fiddle 1（没有填充），它提供了

'computedValue：180px'

使用{{1}}，fiddle 2会给出结果与其他浏览器相同..

我希望这能清除IE中的原因（IE有自己的想法，有时会给开发人员带来痛苦）

Answer 2

是的，这两个功能之间存在一些差异。

getBoundingClientRect()将返回一个文本矩形对象，该对象包含一组文本矩形（由getClientRects()为元素返回的矩形的并集，即与元素关联的CSS边框）。在应用所有CSS之后，后者getComputedStyle()将返回该元素的计算CSS样式。

因此产生的宽度和高度可能会大不相同。

例如，只需将transform应用于该元素即可更改getBoundingClientRect()返回的宽度：

http://jsfiddle.net/epW3c/

此外，即使您为元素添加边框或填充，两种情况下的宽度和高度也会不同。

根据您正在测试的IE版本，您可能会遇到臭名昭着的Internet Explorer box model bug，导致元素尺寸的解释错误。通过正确添加文档类型，确保您没有在quirks mode中运行您的网页。

元素宽度/高度的方法

2 个答案: