HTML页面加载不同的第一次和第二次(谷歌浏览器)

Question

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

第一次:

第二(及更晚)时间:

我之前没有看到过这样的问题,而且在搜索其他投诉方面遇到了麻烦.关于从哪里开始调查的任何建议？

EDITS

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

Answer 1

好的 - 这个问题取决于多种因素

• 仅可能发生在空缓存的情况下
• 取决于 font-awesome 和 bootsrap 的加载速度 - 如果它们加载速度比您的徽标快...

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

您无法轻松修复加载竞争条件，但修复您的 css 应该可以：

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

所以这里是：

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

希望有帮助。