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

我有一张桌子：

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

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

这几乎就好像它对每个其他标记都应用了一个额外的边框顶部。现在，当我刷新页面时，它工作正常。当我没有添加右边框和左边框属性时，当按下“升级”或“降级”按钮时，它可以很好地工作

我也在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 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>

最好用属性替换边框

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

最好用属性替换边框

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

---

为该功能添加标记和js有助于。StackOverflow！=闪烁请准备一个提琴，或者只发布相关的CSS和HTML最小值。请注意，如果您将标记直接粘贴到窗口中，它将不会出现。请将其缩进四个空格，以确保格式正确。添加此功能的标记和js有助于。StackOverflow！=闪烁请准备一个提琴，或者只发布相关的CSS和HTML最小值。请注意，如果您将标记直接粘贴到窗口中，它将不会出现。请将其缩进四个空格，以确保格式正确。@ArranScott我很高兴能够提供帮助。@ArranScott我很高兴能够提供帮助。