2

所以我有这张桌子：

渲染升级表

我有一些 JavaScript 代码突出显示用户当前的计划，如果他们升级或降级，这会改变。

单击升级按钮并呈现页面时，会产生不需要的副作用，如下所示：

升级表

几乎就好像它对border-top每个其他<td>标签都应用了一个额外的东西。现在，当我刷新页面时，它可以正常工作。当我不添加border-right和border-left属性时，也增加了混乱，当按下“升级”或“降级”按钮时它工作正常。

升级表左右无边框

我也在 Firefox 和 Safari 中对其进行了测试，Firefox 可以很好地渲染它，但它仍然会在 Safari 中产生不需要的副作用。

有人知道为什么吗？

$('#' + params['current_plan']).addClass('current_pricing_plan');`
$(".current_pricing_plan button").prop("disabled", true);`

.current_pricing_plan {
border-bottom: 2px solid #00a6cd!important;
border-left: 2px solid #00a6cd;
border-right: 2px solid #00a6cd;
border-top: 2px solid #00a6cd!important;
background-color: #f4f4f4;
}

第一个代码块是 JS，第二个是 CSS，我使用的是 Rails，所以这<tr>是 html.erb 文件中的一个示例。

<tr id="750" class="current-pricing-plan">
  <td><strong>£25</strong><span class="smalltxt"> /month</span></td>
  <td><strong>750</strong><span class="smalltxt"> mins&nbsp;included</span></td>
  <td><strong>4p</strong><span class="smalltxt"> /min&nbsp;thereafter</span></td>
  <td class="last-col">
    <button class="btn smallbtn confirm_opener_750-25">
    <span class="hidetextmobile"></span>
    <% if @account.billing_plan.inclusive_minutes > 750 %>
      <span class="your-plan">Downgrade</span><span class="your-plan-none">Your Plan</span>
    <% else %>
       <span class="your-plan">Upgrade</span><span class="your-plan-none">Your Plan</span>
    <% end %>
  </button>
 </td>
</tr>
4

1 回答 1

4

最好border用outline属性替换你的。

.current_pricing_plan {
outline: 2px solid #00a6cd!important;
}
于 2013-07-26T11:52:35.600 回答