css - HTML 页面第一次和第二次加载不同(Google Chrome)

Question

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

第一次:

第二次(及以后):

我以前从未遇到过这样的问题，并且无法搜索与此相关的其他投诉。关于从哪里开始调查的任何建议？

编辑

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

Answer 1

好的 - 这个问题取决于很多事情

• 只有缓存为空时才可能发生
• 取决于 font-awesome 和 bootsrap 的加载速度 - 如果它们加载速度快于您的 Logo ...

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

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

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

这里是:

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

希望对您有所帮助。