Chrome和Firefox上的样式不一致

Question

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

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

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

-moz-box-sizing: border-box; 

就我所见,没有任何帮助.

因此,如果你在Chrome中运行这个小例子,它看起来会很好.在Firefox中你可以发现一些错误(确保以更宽的宽度查看以查看错误)

我已经尝试了其他各种建议选项但没有取得好成绩.更接近解决问题的是border-collapse完全删除,但这使得所有边界都可见,如下图所示:

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

Answer 1

我已经更新了您原来的 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 样式，您就可以看到更干净的外观。