css – 在Chrome和Firefox上设置不一致

我有一张桌子,对于我的一个细胞我正在使用规则

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

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

-moz-Box-sizing: border-Box;

没有任何帮助,只要我能看到.

所以,如果你在Chrome中运行this小例子,看起来会很好.在Firefox中,您可以发现一些错误(请确保在更宽的宽度上查看以查看错误)

我已经尝试过各种其他建议的选项,没有很好的结果.更接近解决这个问题的办法是完全消除边界崩溃,但这样可以使所有边界都可见,如下图所示：

这是Firefox的常见问题,我如何克服这个问题.

解决方法

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

我在你的小提琴上的变化是：

>删除空的< tbody>元素.最佳做法是将身体行分组到< tbody>内.一些现代浏览器可能会自动更正错误,但并不是所有浏览器都足够聪明.所以为了一致性,我们可以避免依赖于更智能的浏览器.
>接下来我有这些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);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

简单地删除那些CSS样式,你可以看到一个更干净的外观.