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



所以我在IE11…中有这个

四舍五入(我认为…)

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

未舍入

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

四舍五入(或最接近的整数)

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

因此,很明显,$(document)和$("html")是相同的,jQuery正在向下取整html元素,而不是像浏览器那样向上取整。或者IE11为$(文档)提供了一些额外的空间,使像素数量比html更高?

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

我的问题:

它们应该是相同的宽度吗?如Firefox、Chrome等。

下面是一个类似问题的答案:在JavaScript中,document关键字是包含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会将documenthtml的宽度都舍入,并且仍然使它们的宽度相同

最新更新