Question

我在我的客户网站页面中的Firefox浏览器中遇到了这种奇怪的行为。

当我清除缓存并刷新时，或者使用Ctrl + F5刷新页面时，页面的格式会失真。

在此之后，如果按F5（而不是Ctrl + F5），页面会立即正确加载。

我尝试按照here和here链接对浏览器进行问题排查和重置。

我还搜索了firefox的网络和各种论坛，但无法解决这个问题。

Firefox版本为41，但我认为问题出在所有版本上。

Chrome正常运行。

问题的网址是here。

以下屏幕截图也有助于理解我的问题。

请帮忙！

Answer 1

你有<div id="page">的宽度在CSS中设置为911px。然后你有一个脚本在$(document).ready()事件中将其宽度更改为100％。

现在，在所有同步JavaScript文件和文档本身都已加载之前，就无法触发就绪事件。在已准备好的缓存中，JavaScript文件将加载更快，因此就绪事件将更快地启动，在您注意到之前将页面宽度设置为100％。

但是，在空缓存中，JavaScript文件将需要更长时间才能加载。在触发ready事件之前，浏览器可能会呈现页面的某些部分。实际上，第二个屏幕截图显示了“从...传输数据”状态，这很可能意味着页面尚未加载。

解决方案：

您希望阻止页面在加载时跳转，并且您需要通过JavaScript设置页面宽度，并且您不能等到文档就绪/页面加载。一种解决方案是内联改变页面宽度的JavaScript代码。首先定义这些CSS类：

#page { width: 911px; }
#fullwidth + #page { width: 100%; }

然后插入几行内联JavaScript：

<script>
if (mustBeFullWidth) {
    document.write('<div id="fullwidth"></div>');
}
</script>
<div id="page">
    <!-- content -->
</div>