使用CSS边框样式在Chrome中呈现问题

Question

所以我有这张桌子：

我有一些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，所以这是html.erb文件中<tr>之一的示例。

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

Answer 1

最好将border替换为outline属性。

.current_pricing_plan {
outline: 2px solid #00a6cd!important;
}