【问题标题】：HTML page loads different first and second time (Google Chrome)HTML 页面第一次和第二次加载不同（谷歌浏览器）
【发布时间】：2013-09-15 12:44:06
【问题描述】：

我有一个 HTML 页面，在您第一次加载时以一种方式加载，第二次以另一种方式加载。这可以在私有模式下使用 Chrome 重现（因为它每次都会清除缓存）。

第一次：

第二次（及以后）时间：

我以前从未见过这样的问题，并且在搜索其他有关此问题的投诉时遇到了麻烦。关于从哪里开始调查有什么建议吗？

编辑

感谢所有反馈。只是为了澄清一些事情。 CSS 仅是标准的 Bootstrap 3.0，没有其他样式或 CSS。 URL 是https://www.acls.net/index-exp120.php，这是禁用所有扩展的 Chrome 私有模式。我只在 Chrome 中看到此问题，已更新标题以反映这一点。

【问题讨论】：

那可能只是浏览器..你检查过你的 css 吗？
你后来提到了这个词，是不是有一些 CSS 没有加载，可能是被某些脚本加载阻塞了？这将完成加载并被第二次缓存？
如果您通过 Chrome 的开发工具设置禁用缓存会怎样？其他浏览器会出现这种情况吗？
您是否偶然在标记中使用了定义列表？如果是这样，我之前也遇到过这个问题。
抱歉，即使在任何浏览器的隐私模式下也无法复制。检查是否有一些插件试图干扰。

标签： css html google-chrome

【解决方案1】：

需要研究的一些主要问题。浏览器大小。它是否在某一点比另一点更宽？

它显然在同一个浏览器中，但以防万一，我会在多个浏览器中测试它，因为你确实希望你的代码是交叉兼容的。

对我来说，这看起来像是一个宽度问题。

也许您在右上角有一个#login div，或者一些奇怪的名字，它包含该内容并浮动它，并且内容不是响应式的，但 div 本身是。当 div 缩小一点时，内容本身不会缩小，并将其余内容向下推。

【讨论】：

【解决方案2】：

好的 - 问题取决于多个方面

只可能发生在空缓存中
取决于 font-awesome 和 bootsrap 的加载速度——它们的加载速度是否比您的徽标快...

因此，在隐身模式下运行 Chrome 并一次又一次重新加载时，我最终可以重现该问题。

你不能轻易修复加载竞争条件，但修复你的 css 应该可以工作：

将pull-left 类添加到您的徽标中
通过将clearfix 类应用于页眉来清除浮动区域
这不是必需的，但很好的选择，将 width 和 height 添加到您的徽标图像中，这样它就不会在加载后弹出

原来是这样：

<div class="page-header clearfix">
    <a href="/" class="logo pull-left"">
        <img src="images/logo.png" height="62" width="232" alt="">
    </a>

希望有所帮助。

【讨论】：

谢谢，这行得通。我现在在这个页面上使用 pull-left 和 clearfix。我已将损坏的页面提交给 Google Chrome 团队并将其存档在pastebin.com/Wj8YMgXc
我遇到了一个非常奇怪的问题，导致我出现在 Lumia 720 上只有第二次加载页面时才正确显示的问题。重新加载页面或旋转手机时，它出现了适当地。您的回答让我研究了 Font Awesome 与 Bootstrap 的冲突。果然，禁用 Font Awesome 解决了这个问题。然后我移动了 Font Awesome after Bootstrap 的 <link> 导入，这也解决了这个问题。你知道我在哪里可以找到更多关于这背后的确切原因吗？我想也许 CSS 加载的顺序很重要。