为什么我的 CSS “有时”会出错

Question

我的一个网站的行为很奇怪。布局有时很好，有时很古怪。我看到问题的一个示例页面是这个：link

免责声明：我尚未开始认真调查原因。我转向 Stackoverflow 是因为我很懒，我希望有人会说“这发生在我身上一次，可能是这个......”。所以，如果这是您以前从未见过的事情，请没有人会陷入解决这个问题的过程中，因为这不公平，因为我自己没有这样做。

好的，一些背景：

• 第一次查看页面时通常（可能总是）出现该问题
• 问题并不总是出现，只是有时出现
• 当页面显示为 munged 时，如果您刷新它通常会重新加载，看起来应该是这样的
• 该网站是一个 Rails 应用程序
• css 是通过整洁的Smurf Gem 传递的，它会自动缩小页面上的 CSS 和 Javascript。
• firefox（linux 和 winXP）出现布局问题
• 在生产环境中使用“:cache => true”选项提供 CSS，该选项将所有 css 文件连接到一个文件中

无论如何，我希望以前有人遇到过这种情况，而且修复起来非常简单。如果没有，我会去调查并返回解决方案（或请求更多帮助）。

提前致谢！

詹姆斯。

[edit]受 cmets 和第一个答案的启发，我添加了前两个要点[/edit]

Answer 1

我们在使用 HAML 和 SASS 时遇到过类似的情况，导致 CSS 完全不可用。它只发生在部署上。我们确定这是合并 Rails 样式表和从 SASS 生成 CSS 的组合。 Sass 还没有完成 CSS 的生成，它是在第一次向应用程序请求时完成的，当时 Rails 试图将它们合并在一起。结果，一个损坏的无用 CSS 文件。然后我们偶然发现了this article，它提供了防止此问题的解决方案。

基于这一切，我最好的猜测是 Smurf gem 会尝试在第一个请求时生成您的文件，但 Rails 会在完成之前提供它。生成完成，然后每个后续请求都可以。如果这是问题，那么我知道的唯一解决方案是在第一个请求之前生成文件。当然，这确实假设它以某种方式与部署或应用程序重启有关。

同行

Answer 2

我遇到了这样的问题。问题仅在第一次加载页面时出现。只需重新加载它就可以了。 在我的情况下，问题是图像第一次不在缓存中，所以浏览器在准备导致问题的页面时不知道它的尺寸

Answer 3

如果图像没有指定高度/宽度，则会在页面上创建一个位置并将其放置在那里。如果图像不太合适，浏览器可能在刷新之前不知道这一点。然后它已经知道大小并且可以将其正确地适合页面。