Question

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

ROUNDED UP（我认为......）

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

没有回合

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

ROUNDED DOWN（或最接近的整数）

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

显然，$（document）和$（“html”）是相同的，jQuery将html元素向下舍入而不是像浏览器那样向上舍入。或者IE11给$（文档）一些额外的空间，增加了比html更高的像素数量？

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

我的问题：

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

Answer 1

以下是对类似问题的回答： In JavaScript, the document keyword is a handle on the object that contains the HTMLDocument. 所以它们不一样，文档是一个对象，它也包含页面的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和文档的宽度没有区别（应该是真的）

<强> 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（）和$（＆＃34; html＆＃34;）之间的区别.width（）

1 个答案: