Chrome和Firefox上的样式不一致

Question

我有一张桌子，对于其中一个单元格我正在使用规则

border-right: 3px solid #000 !important;

它适用于Chrome，但在Firefox中，边框是不可见的。我说隐形，因为如果我停用规则，我可以看到细胞的内容略有移动。

-moz-box-sizing: border-box; 

就我所见，没有任何帮助。

因此，如果你在Chrome中运行this小例子，它看起来会很好。在Firefox中，您可以发现一些错误（确保以更宽的宽度查看以查看错误）

我尝试了其他各种建议的选项但效果不佳。更接近解决问题的是完全删除border-collapse，但是这使得所有边框都可见，如下图所示：

这对Firefox来说很常见，我该如何克服这个问题。

Answer 1

要尝试的一件事是在表格单元格中添加另一个块元素，并将边框样式应用于该元素。例如，您可能会尝试执行以下操作：

<table>
  <tr>
    <td>
        <div style="border-right: 3px solid #000;">My Content</div>
    </td>
  </tr>
</table>

<td>和<th>等表格单元格的大小与常规块，内联块或内联元素的大小不同，因此根据可用空间，边框的计算结果也可能略有不同。

通过在表格单元格中使用<div>，您可以将其宽度设置为100％并将其高度设置为100％，以便覆盖整个可用的表格单元格，然后您可以应用任何您喜欢的边框在div元素上设置div和box-sizing:border-box，它应该看起来像你想要的那样。例如：

<div style="border-right: 3px solid #000; width: 100%; height: 100%; box-sizing: border-box;">My Content</div>

Here is more info on table sizing / box model quirks

Answer 2

这是一个已知的错误＆＃39;在Firefox中。将border-collapse设置为collapse会导致此问题。一种解决方案是将border-collapse设置为separate。

Answer 3

我已经更新了您的原始jsfiddle https://jsfiddle.net/sfodcjkz/4/并进行了一些小调整 https://jsfiddle.net/sfodcjkz/18/

我对你的小提琴所做的改变是：

1. 删除了空的<tbody>元素。最佳做法是将正文行分组到<tbody>内。一些现代浏览器可能会自动更正错误，但并非所有浏览器都足够智能。因此，为了保持一致性，我们可以避免依赖更智能的浏览器。
2. 接下来我遇到了这些css的问题：

行：349

.responsive-table thead {
    clip: auto;
    height: auto;
    overflow: auto;
    position: relative;
    width: auto;
}

行：258

.responsive-table thead {
    border: 0 none;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

简单地删除了那些css样式，你可以看到更干净的外观。