不同浏览器的 document.body.offsetWidth 变化
Posted
技术标签:
【中文标题】不同浏览器的 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。
【讨论】:
以上是关于不同浏览器的 document.body.offsetWidth 变化的主要内容,如果未能解决你的问题,请参考以下文章