css - 在表格中制作带有提交按钮的 Sprite

Question

我想创建两个 sprite 按钮来验证(或不验证)一些请求。

这是我的同意按钮:

<div class="validation_button loan_button" id="agreed_loan_button_<%=loan.id%>">
  <% if loan.agreed == true %>
    <div class="icon-agree enabled"></div>
  <% elsif loan.agreed == false %>
    <div class="icon-agree disabled"></div>
  <% else %>
    <%= form_for(loan, remote: true) do |f| %>
      <div><%= f.hidden_field :agreed, value: true %></div>
      <%= image_submit_tag("24px.png", alt: t('button.loan.agree'), title: t('button.loan.agree'), class: "icon-agree active") %>
    <% end %>
  <% end %>
</div>

其中24px.png是边长为24px的正方形透明图片。

这是我的同意按钮出现的地方:

<table class="table table-hover">
  <tbody>
    <tr>
      <th><%= t('product.borrower') %></th>
      <th><%= t('loan.created.since_the') %></th>
      <th><%= t('loan.validation') %></th>
    </tr>
    <% @pending_loans.each do |loan| %>
      <tr id="loan_<%= loan.id %>">
        <td>
          <%= link_to loan.seeker.name, loan.seeker %>
        </td>
        <td>
         <%= I18n.l loan.created_at, format: :only_date %>
        </td>
        <td class="validation">
          <%= render 'loans/buttons/agreed', loan: loan %>
          <%= render 'loans/buttons/refused', loan: loan %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

然后这是我的css:

.icon-agree {
  background: url("agree.png");
  display: block;
  width: 24px;

  height: 24px;
  &.enabled {
    background-position: 0 -24px;
  }
  &.disabled {
    background-position: 0 0;
  }
  &.active {
    text-indent: -9999px;
    &:hover {
      background-position: 0 -24px;
    }
    &:active {
      background-position: 0 -48px;
    }
  }
}

当我在开发环境中使用我的应用程序时，它呈现的正是我想要的。但如果我将其投入生产，方形透明图像将变为空白并隐藏 Sprite 背景。

您有什么想法可以让它发挥作用，并让它成为更多……好​​的实践吗？

Answer 1

看起来您正在使用 SASS/SCSS。您是否已验证您的 SCSS 文件已在生产环境中正确编译？您是否使用任何东西(例如 Compass)来组装您的 Sprite ？