IE11 中的 jQuery - $(document).width() 和 $("html").width() 之间的区别

Question

所以我在 IE11 中有这个...

四舍五入（我认为...）

console.log($(document).width()); // 808px;

未舍入

console.log($("html")[0].getBoundingClientRect().width); // 807.30993px;

向下舍入（或最接近的整数）

console.log($("html").width()); //807px;

显然，$(document) 和 $("html") 是相同的，并且 jQuery 将 html 元素向下舍入，而不是像浏览器那样向上舍入。或者 IE11 为 $(document) 提供了一些额外的空间，将像素数量提高到比 html?

我以为 html 应该代表整个文档？

我的问题：

它们的宽度应该相同吗？就像在 Firefox 中一样，Chrome，等等

Answer 1

这是对类似问题的回答： In JavaScript, the document keyword is a handle on the object that contains the HTMLDocument. 所以他们不一样， document 是一个 object ，它也包含 html 的页面。

Now when you get the width from the html and document.

console.log($("html").width());

给你 html 的宽度。

和console.log($(document).width()); 为您提供文档可见部分的宽度 ，因此显然是 <html> 本身的宽度，但如果您对 html 应用了边距，则存在差异, 那么文档的宽度就是 sum of width of html and the margin applied to it.

看这个例子http://jsfiddle.net/bbke9n59/

<div style='background:red;height:30px;'></div>

html{
    margin:20px;
}

在这里，在我的浏览器中，我得到，

console.log('html='+$("html").width()); // width 630

console.log('document='+$(document).width());// width 670

确切地说，40px 的宽度差异，那只是应用于 html

的边距

现在这都是关于 chrome 和 firefox，

About IE

IE-9 当我运行 IE-9

上的同一页面时

   console.log('html='+$("html").width()); // width 570
    
    console.log('document='+$(document).width());// width 570

html和文档的宽度没有区别（真的应该有）

IE-11 当我运行 IE-11

上的同一页面时

   console.log('html='+$("html").width()); // width 517
    
    console.log('document='+$(document).width());// width 557

精确相差 40。正如 chrome 和 firefox 显示的那样。

所以我无法再重现四舍五入的问题（在任何浏览器中），所以对我来说，我想问题不在于使用 jquery(如果这是问题所在，那么 jquery 会把 document 和 html 的宽度四舍五入，并且仍然使它们的宽度相同 )

IE11 中的 jQuery - $(document).width() 和 $("html").width() 之间的区别

jQuery in IE11 - Difference between $(document).width() and $("html").width()

html

javascript

jquery

internet-explorer

getboundingclientrect