Rails应用程序处理CSS的方式有何不同？

时间：2012-03-18 00:53:01

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

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

Index in public directory

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

index.html.erb file

您可能会注意到，在Rails版本中，BETA文本略低，显然导航列表低于我的标题元素。

我承认在css和rails上都有点新意，所以这可能是一个我不知道的已知问题。我试图寻找一些见解，但没有发现任何与此类似的问题。如果有人知道如何解决这个问题我会非常感激！

编辑：我将index.html和style.css文件包含在以下的pastebins中。它们很小，也许看看它们可以给你们一些见解。

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>

这会导致问题吗？

3 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：2)

关于编辑＃3：它看起来像来自app / views / layouts / application.html.erb中的默认布局。默认情况下，Rails将加载该文件并将视图中的所有内容放在＆lt;％= yield％＆gt;已指定。如果您的视图文件中有其他＆lt; html＆gt;，＆lt; head＆gt;等标记，则会重复这些标记。您可以了解有关布局here的更多信息。另外，请查看asset pipeline，了解如何在应用中构建CSS文件。

就像欧内斯特所说，Rails只是提供HTML / CSS文件，因此框架本身不会影响浏览器呈现内容的方式。但是，当然，将内容呈现给浏览器的订单确实很重要。

答案 2 :(得分：0)

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

使用浏览器的检查器检查哪些CSS规则影响给定元素。 所以，假设你使用谷歌浏览器，你可以：

  1. 右键单击其中一个导航栏项，选择检查元素
  2. 然后在新的源代码窗口中选择 .logo-container 或 .nav
  3. 检查右侧面板：您将看到该元素当前应用的所有CSS规则。
  4. 您还会看到哪个文件正在应用哪个规则。
  5. ???
  6. PROFIT！
相关问题
最新问题