Rails 应用程序处理 CSS 的方式不同吗？答案

【问题标题】：Does a Rails app handle CSS differently?Rails 应用程序处理 CSS 的方式不同吗？
【发布时间】：2012-03-18 00:53:00
【问题描述】：

我有两组相同的 html 和 css 文件。其中一个是通过控制器通过 Rails 的 index.html.erb 文件加载的，另一个是通过我的公共文件夹作为控件运行。公共 index.html 文件看起来不错：

但是当我在 rails index.html.erb 文件中运行这些完全相同的文件时，它看起来像这样：

您可能会注意到，测试版文本在 Rails 构建中略低，显然导航列表位于我的标题元素下方。

诚然，我对 css 和 rails 都有些陌生，所以这可能是一个我不知道的已知问题。我尝试寻找一些见解，但没有发现任何与此类似的问题。如果有人有关于如何解决此问题的提示，我将不胜感激！

编辑：我将 index.html 和 style.css 文件包含在以下 pastebin 中。它们很小，也许看看它们可以让你们有所了解。

HTML：http://pastebin.com/wyYEN92n

CSS：http://pastebin.com/60xMe9YG

编辑 2：

在页面源码中找到这两行：

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />

我认为可以安全地假设这些 css 文件中的某些内容导致了差异。我会调查并报告。

编辑 3：

看起来这些 css 文件实际上都没有做任何事情。我在这个 pastebin 中包含了两者的内容：http://pastebin.com/pbHwEp4w

如您所见，它只是评论的内容。然而，我确实注意到，页面源在同一个文件中包含 2 个 html 标记。我也在粘贴它：http://pastebin.com/h4Rjqi4B

去吧

<html>//rails generated stuff</html> 
<html>//My stuff</html>

这会导致问题吗？

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3 css

【解决方案1】：

关于编辑#3：它看起来来自 app/views/layouts/application.html.erb 中的默认布局。默认情况下，Rails 将加载该文件并将视图中的所有内容放在指定的位置。如果您的视图文件中有额外的、

等标签，它们将被复制。您可以了解有关布局的更多信息here。另外，请查看asset pipeline，了解如何在应用中构建 CSS 文件。

就像 Ernest 所说，Rails 只是交付 HTML/CSS 文件，因此框架本身不会影响浏览器呈现内容的方式。但是，向浏览器呈现内容的顺序当然很重要。

【讨论】：

我将 css 文件添加到资产管道而不是公共/样式表中，问题得到解决。我不会问得太深，在这一点上感激不尽，哈哈

【解决方案2】：

CSS 在浏览器中解释，而不是在服务器上，所以简单的答案是“不”。但是当您的样式被添加到 Rails 应用程序本身包含的任何样式中时，它们的解释可能会有所不同，并且您的 HTML 可能在两者之间有点不同。检查 Rails 应用程序中包含的 CSS 并删除任何会对您的设计产生不利影响的内容 - 或者干脆将其全部删除，确保您的 CSS 文件是整个代码库中唯一的一个。

【讨论】：

html 文件100% 相同，css 文件是项目中包含的文件。是两者之间的直接复制粘贴，唯一的区别是一个命名为index.html，另一个命名为index.html.erb
没有其他 CSS 文件？如果您在浏览器中使用“查看源代码”，Rails 是否在 HTML 中插入了指向另一个链接的链接？
啊！好像发现了什么。为了便于阅读，我将把它添加到问题中。
尝试挖掘 Firebug 或 Chrome 工具以查看“继承的样式”。有时元素可能继承自另一个 CSS。
在这里发现了两个 rails 生成的 css 文件，这些文件在我的业务中受到了影响，当我发现它们会影响什么时，我会更新问题。

【解决方案3】：

解决此类问题的最简单方法：INSPECT。

使用浏览器的检查器检查哪些 CSS 规则正在影响给定元素。因此，假设您使用 Google Chrome，您可以：

右键单击导航栏项目之一，选择检查元素
然后在新的源代码窗口中选择 .logo-container 或 .nav
检查右侧的面板：您将看到该元素当前应用的所有 CSS 规则。
您还将看到哪个文件应用了哪个规则。
???
利润！

【讨论】：