CSS 有时在初始加载时无法正确加载

Posted 2023-02-22

【中文标题】CSS 有时在初始加载时无法正确加载

【英文标题】：CSS sometimes does not load properly on initial load

【发布时间】：2011-01-13 23:57:45

【问题描述】：

当我第一次加载页面时，有时我的网站标题格式不正确。

不正确：

在下面的屏幕截图中，标题位于黑色水平线内

alt text http://techboy.co.uk/misc/Incorrect_View.PNG

刷新页面后，标题下方有空格：

alt text http://techboy.co.uk/misc/Correct_View.PNG

这个问题已经在好几页上看到了，而不仅仅是我截图的那一页 (http://www.getmecooking.com/blog/review-of-food-bloggers-connect-london-november-2009)

请您告诉我为什么会发生这种情况以及如何解决它？

谢谢。

【问题讨论】：

我无法在 Firefox 3.6 中重新创建此错误，它是否发生在特定浏览器中？

不，我在 FireFox 3.6 和 IE8 中看到过。这个问题是间歇性的，很难复制。

【参考方案1】：

您的 CSS 文件似乎正在加载。这个问题似乎是一个 position: 问题。对于绝对定位但不包含在另一个相对定位的 div 中的元素，我也遇到过类似的问题

【讨论】：

好主意，但我在页面上唯一的绝对位置是 AddThis 菜单，它位于标题 div 下方。所以我不认为这是一个问题。谢谢。

【参考方案2】：

如果您不使用@imports，它还会发生吗？只需将样式表直接包含在页面中，看看是否会有所不同。

【讨论】：

我可以试试，问题是问题是间歇性的，所以我无法可靠地测试它。如果我们认为这样做可以解决问题，那么正确的解决方法是什么？谢谢。

如果它解决了问题（顺便说一句，我能够在 Linux 上的 Firefox 3.6 中重现该问题），那么正确的解决方法是让它保持固定 :)

我不会热衷于在页面中包含所有 CSS :-) 我读过 stevesouders.com/blog/2009/04/09/dont-use-import 说“链接”并行获取多个 CSS 文件和“@import”按顺序获取它们，因此链接速度更快。加上那里的第四条评论说切换到链接解决了一个听起来与我遇到的问题相似的问题，所以我会先尝试:-)

我的建议是使用link 而不是link 和@imports。所以，是的，我认为我们在同一页面上。

我已移至链接，但我仍然间歇性地看到问题:-(

【参考方案3】：

我们发现了一个数据库问题，该问题间歇性地导致页面的动态内容加载速度比正常情况稍慢。修复似乎解决了 CSS 问题！