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

【问题标题】：jQuery in IE11 - Difference between $(document).width() and $("html").width()IE11 中的 jQuery - $(document).width() 和 $("html").width() 之间的区别
【发布时间】：2015-02-13 07:27:54
【问题描述】：

所以我在 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 等中一样。

【问题讨论】：

标签： javascript jquery html internet-explorer getboundingclientrect

【解决方案1】：

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

现在，当您从 html 和文档中获取宽度时。

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 的，

关于 IE

IE-9 当我在 IE-9 上运行同一页面时

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

html和document的宽度没有区别（应该是真的）

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 的宽度，并且仍然使它们的宽度相同）

【讨论】：