不同浏览器的 document.body.offsetWidth 变化

Posted 2023-03-04

【中文标题】不同浏览器的 document.body.offsetWidth 变化

【英文标题】：document.body.offsetWidth variations for different browsers

【发布时间】：2010-09-23 15:47:32

【问题描述】：

document.body.offsetWidth 返回firefox中从左侧到垂直滚动条左侧的innerwidth值。 在 IE 中它不会，而是从垂直滚动条的左侧返回到右侧。 有谁知道一种明智的方法，我可以制作一个可验证的，例如“var = offsetw;”为了让 offsetw 成为滚动条宽度，我需要减去以获得像 document.body.innerWidth 一样的 firefox 值？ 这就是我所拥有的。

if (parseInt(navigator.appVersion)>3) 
    if (navigator.appName=="Netscape") 
        winW = 16;
        winH = 16;
    
    if (navigator.appName.indexOf("Microsoft")!=-1) 
        winW = 20;
        winH = 20;
    
    if (navigator.appName.indexOf("Mozilla")!=-1)
        winW = 0;
        winH = 0;
    

Firefox 当前使用 16 值，而不是 Mozilla 行声明的零，这表明它是错误的。

只有当这些浏览器不自动从 document.body.offsetWidth 中减去滚动条时，我才会添加或修复以使每个浏览器的 winW 和 winH 滚动条的正确大小

谢谢:)

【参考方案1】：

您是否尝试过 javascript 库？这是摆脱这些问题的最简单方法。我推荐：jquery 或 YUI（Yahoo 用户界面），其中所有内容都封装在类中，使代码几乎与所有浏览器兼容。

除了这个考虑之外，在下面的页面中你可以找到一个知道滚动条宽度的函数（我没有测试过）：

http://www.alexandre-gomes.com/?p=115

http://javascript.jstruebig.de/javascript/70/

代码是这样的（不知道是否兼容所有浏览器）：

function scrollbarWidth() 

    // Scrollbalken im Body ausschalten

    document.body.style.overflow = 'hidden';

    var width = document.body.clientWidth;



    // Scrollbalken

    document.body.style.overflow = 'scroll';



    width -= document.body.clientWidth;



    // Der IE im Standardmode

    if(!width) width = document.body.offsetWidth-document.body.clientWidth;



    // urspr?ngliche Einstellungen

    document.body.style.overflow = '';



    return width;

【讨论】：

我也推荐 jQuery。在那里您可以使用 $(document).width() 或 .height() 以及尺寸插件 offset().left 和 offset().top。

我偏离了这些库，因为使用它们会阻止您了解它们应用此类小偏移量背后的原因。

自学主题是件好事，总体而言，当您发现自己遇到特定案例或错误时，不过，好的一点是使用 jquery 等开源库，由网络社区和参与其开发的专家，代码的可维护性几乎是肯定的，并且与不同设备中不同（和未知）浏览器的兼容性几乎完美......

【参考方案2】：

document.body.offsetWidth 返回firefox中从左侧到垂直滚动条左侧的innerwidth值。

对我来说不是，它返回与 IE、Opera、Konqueror 和 Safari 相同的值。示例代码？

在最好的情况下，通过 appName 嗅探浏览器是非常不可靠的，在这种情况下无论如何都不会涵盖它，因为滚动条的大小受操作系统和用户偏好的影响比浏览器更多。

相反，如果您想读取“内部尺寸”，请使用 clientWidth/clientHeight 而不是 offsetWidth/offsetHeight，或者使用滚动条测量块内的 offsetWidth。