1

我想创建两个精灵按钮来验证（或不验证）一些请求。

所以这是我同意的按钮：

<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;
    }
  }
}

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

您是否有想法使这项工作有效，并使其更加……良好的做法？

4

1 回答 1

0

看起来您正在使用 SASS/SCSS。您是否验证过您的 SCSS 文件已在生产环境中正确编译？您是否使用任何东西（例如，指南针）来组装您的精灵？

于 2013-07-04T13:35:50.047 回答