Question

我正在使用Wordpress在这个网站上工作 http://josedelavega.nowcommu.myhostpoint.ch/preise/

正如您在此页面中看到的那样，有一个价格表。对于此表，我正在使用此插件https://de.wordpress.org/plugins/table-maker/。在谷歌浏览器和Safari上一切正常，但如果你在Firefox上查看它，你就看不到行的边框。

我可以通过CSS解决吗？

Answer 1

正如我在我的问题评论中所说，这是一个已知的Firefox错误。我可以想办法解决这个问题，使用background-clip。在你的（插件）CSS中应该有这个部分：

.wpsm-comptable td {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: #fff none repeat scroll 0 0;
    border-color: #e8e8e8;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: #111;
    min-width: 120px;
    position: relative;
    vertical-align: middle;
}

尝试将background-clip: padding-box添加到此选择器。这应该可以解决问题。

Answer 2

这个问题有很多解决方案：

从border-collapse:collapse

.story table, .defaultwp table, .contentaboutbox table

如果您仍希望保持边框折叠，则其他选项将为：

将background-clip: padding-box添加到您的td元素。所以添加

.defaultwp table, .contentaboutbox table td {background-clip: padding-box}

选中此处以获取更多信息https://developer.mozilla.org/en-US/docs/CSS/background-clip

将位置静态添加到td

.defaultwp table, .contentaboutbox table td {position: static}

但是如果你在同一个td上使用:: before或:: after之类的伪元素，那么：static会混淆这些样式。 background-clip：padding-box更安全

表行的边框仅在Firefox中隐藏

2 个答案: