Html 相同的分部在两个相同的应用程序中表现不同_Html_Css_Ruby On Rails

Html 相同的分部在两个相同的应用程序中表现不同

html css ruby-on-rails

Html 相同的分部在两个相同的应用程序中表现不同,html,css,ruby-on-rails,Html,Css,Ruby On Rails,就gems而言，我有两个相同的应用程序，*.js和*.css文件。编辑视图在这两种情况下使用相同的_形式部分给你 <%= simple_form_for @assessment do |f| %> <% if @assessment.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(@assessment.errors.count, "err

就gems而言，我有两个相同的应用程序，*.js和*.css文件。编辑视图在这两种情况下使用相同的_形式部分

给你

<%= simple_form_for @assessment do |f| %>
  <% if @assessment.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@assessment.errors.count, "error") %> prohibited this assessment from being saved:</h2>

      <ul>
        <% @assessment.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <table>
    <tbody>
      <tr>
        <td>
          <%= f.input :question, label: 'Question' %>
        </td>
      </tr>
      <tr>
        <td>
          <%= f.input :answer, label: 'Answer' %>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="actions">
    <%= f.submit 'Save'%>
    <%= f.button :button, 'Reset', :type => 'reset', :class => 'btn' %>
  </div>

<% end %>

我有一个单一的CSS/SCSS文件，

scaffolds.SCSS

，这两个应用程序都是相同的，如下所示：

body {
  background-color: #fff;
  color: #333;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

a {
  color: #000;

  &:visited {
    color: #666;
  }

  &:hover {
    color: #fff;
    background-color: #000;
  }
}

div {
  &.field, &.actions {
    margin-bottom: 10px;
  }
}

#notice {
  color: green;
}

.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;

  h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: -7px;
    margin-bottom: 0px;
    background-color: #c00;
    color: #fff;
  }

  ul li {
    font-size: 12px;
    list-style: square;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <title>LeviTest02</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
  </head>
  <body>

    <%= yield %>

  </body>
</html>

两个应用程序的文件

application.html.erb

相同，除了

标题

，如下所示：

body {
  background-color: #fff;
  color: #333;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

a {
  color: #000;

  &:visited {
    color: #666;
  }

  &:hover {
    color: #fff;
    background-color: #000;
  }
}

div {
  &.field, &.actions {
    margin-bottom: 10px;
  }
}

#notice {
  color: green;
}

.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;

  h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: -7px;
    margin-bottom: 0px;
    background-color: #c00;
    color: #fff;
  }

  ul li {
    font-size: 12px;
    list-style: square;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <title>LeviTest02</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
  </head>
  <body>

    <%= yield %>

  </body>
</html>


LeviTest02
正确%>
正确%>

我错过了什么

检查呈现的页面时，我发现两种情况下的HTML都不相同。以下是应用程序1中的HTML，它正确呈现标签旁边的输入字段：

<input class="string optional" type="text" value="Yes" name="assessment[answer]" id="assessment_answer">

<input class="string optional" maxlength="255" size="255" type="text" value="Yes" name="assessment[answer]" id="assessment_answer">

下面是应用程序2中的同一行HTML代码，其中输入字段呈现在标签下方：

<input class="string optional" type="text" value="Yes" name="assessment[answer]" id="assessment_answer">

<input class="string optional" maxlength="255" size="255" type="text" value="Yes" name="assessment[answer]" id="assessment_answer">

这一行作为补充参数

maxlength=“255”

，我不知道它是如何添加到那里的。

我在文件夹

config/initializers

下的第二个应用程序中缺少一个文件。添加文件

simple\u form.rb

后，服务器重新启动，问题消失。

非常感谢收到的提示。

一切都一样，包括相同的浏览器版本？我会检查元素并查看控制台中的css类。是的，我使用Safari浏览器运行这两个应用程序。当使用Google Chrome浏览器运行这两个应用程序时，我会得到相同的奇怪行为。使用Chrome dev工具，并检查元素上的样式，应该会发现差异，我这样做了，我发现了生成的HTML中的差异。我将更新问题以提供HTML。如果您试图找出文件/文件夹中的差异，请查看类似BeyondCompare的内容。这将非常有用，并且可以很容易地看到这个问题的原因。