与其他浏览器相比，Firefox 中通过 Javascript 计算的文档宽度不同答案

【问题标题】：Document width calculated via Javascript is different in Firefox compared to other browsers与其他浏览器相比，Firefox 中通过 Javascript 计算的文档宽度不同
【发布时间】：2012-04-04 19:26:00
【问题描述】：

我在从 Mozilla Firefox 检索当前页面文档宽度时遇到问题。其余浏览器报告文档的正确宽度，而 Firefox 报告较小的宽度（例如：在 IE 的屏幕分辨率为 1920x1080 时，Chrome 和 Safari 报告为 1920，而 Firefox 报告为 1903）。

我在 $(document).ready(function() { ... }); 中使用文档宽度重新定位 div 元素。有趣的是，在此函数中使用 alert() 后，元素重新定位正确，尽管文档大小仍然小于其他浏览器。

【问题讨论】：

(i) 有滚动条吗？（它在 FF 中正好占用 17px） (ii) 你检查 DOM 稳定后的高度吗？
(i)是的。 (ii) 不，我不需要高度，只需要宽度。顺便说一句，稳定后如何检查DOM？我做了一个小技巧，增加了 500 毫秒的延迟，现在重新定位正确，但我想要一个静态解决方案。
如果存在滚动条，宽度将为屏幕宽度 - 17px。计算准备好的文档内部宽度的想法是正确的，但不确定为什么在浏览器中会出现不一致的宽度。一个原因是您的文档在文档准备好后会改变高度。例如。如果您的图像没有指定宽度/高度，则浏览器不知道文档准备好的文档高度。一旦它接收到（前几 KB）图像，它就会重新计算高度并确定需要滚动条。您可能想在 window.load 中计算高度。

标签： javascript jquery firefox

【解决方案1】：

正如 Salman 在 cmets 中已经指出的那样，这种差异来自滚动条。根据浏览器（可能还取决于是否启用了 quirks 模式），滚动条可能被认为是“在”文档“外部”（在这种情况下，它的宽度不会添加到文档宽度中）或 <html> 元素的一部分（然后它的宽度将被添加到文档宽度）。所以document.documentElement.offsetWidth 会返回不一致的结果——有时带有滚动条，有时没有滚动条。另一方面，document.body.offsetWidth 在浏览器中似乎是一致的 - 不包括滚动条宽度。

如果您想学习的是视口宽度，无论内容如何，那么window.innerWidth 可能是更好的选择。我在 Firefox、Chrome 和 MSIE 9.0 中进行了测试 - 它返回所有这些窗口中最大化窗口的全屏宽度。

【讨论】：

我会尝试innerWidth，但错误不再出现。相应页面处于特定状态，高度处于屏幕限制，几乎不超过屏幕高度。一旦我添加了几个
来增加页面高度，问题就消失了。