为什么 Firefox 缺少某些 HTML 表格的边框

Question

我使用的是 Firefox 3.5.7，并且在多个 HTML 表格中使用了相同的 CSS，但在某些示例中，部分边框未显示。

对我来说毫无意义的是，同一页面上另一个 HTML 表的相同 CSS 工作正常。此外，从边框的角度来看，Internet Explorer 中的同一页面看起来也很好。

这是带有示例的图像，正如您在本例中看到的那样，第一个表格的底部缺少边框。

有谁知道为什么会在这里发生这种情况吗？

Answer 1

也许您放大/缩小了一点。当您执行 Ctrl+滚轮操作时，可能会意外或故意发生这种情况。也许它没有完全重置为缩放级别零。这种错误渲染行为在某些网站上是可以识别的，在 SO 也是如此。

要解决此问题，只需按 Ctrl+0 或执行 View > 缩放 > 重置将缩放级别重置为默认值。

这是 Firefox/Gecko 错误 410959。这会影响带有 border-collapse:collapse 的表。这是 2008 年的事情，目前还没有真正的进展，因此您可能需要找到解决方法。一种方法是使用 border-collapse:separate 并在每个单元格的基础上调整边框。

Answer 2

当我在我正在开发的应用程序上缩小 Firefox 时，我发现了类似的问题。

主要原因是 CSS border-collapse 属性设置为 collapse。

将其更改为单独反而解决了问题。然而，这意味着我必须重新考虑将边框应用于表格各个部分的方式，因为否则您的边框的厚度会增加一倍。我最终不得不使用 jQuery 为每个 tr 中的最后一个 td 或 th 以及最后一个提供特殊的“last”类表中的tr。我的查询类似于：

$('table tr > th:last-child, table > tbody > tr > td:last-child, table > tbody > tr:last-child').addClass('last');

我的 CSS 规则类似于：

table
{
    border-collapse: separate !important;
}

table tr, table th, table td
{
    border-right-width: 0;
    border-bottom-width: 0;
    border-left: 1px solid black;
    border-top: 1px solid black;
}

table td.last, table th.last 
{
    border-right: 1px solid black;
}

table tr.last td
{
    border-bottom: 1px solid black;
}

table
{
    border: 0;
}

我最终使用了浏览器定位，因此我只将这些规则应用于 Firefox 用户，但它可能适用于所有浏览器，我还没有测试过。

Answer 3

这是由于表格（缺少底部边框）位于 div 内而导致的...边框显然没有在表格高度中计算，因此边框在那里但未显示。

给周围的 div 一个从 1px 开始的 margin-bottom 解决了这个问题。

Answer 4

基于@GregL 的良好答案（我似乎无法直接对其进行“评论”）：
我没有使用 JQuery 生成“最后一个”类，而是简单地使用了内置的伪元素选择器 :first-child。我构建了选择 tr:first-child 和 td:first-child 的规则，定义了 border-top 和 border-left （而不是 GregL 的答案中的 border-right 和 border-bottom ）。通用规则定义 border-right 和 border-bottom，而不是 border-left 和 border-top。 :first-child 据说在 Chrome v 中受支持 4.0、Firefox v.3.0、IE 7.0、Safari v.3.1 和 Opera v.9.6 ()。在 Firefox v. 40.0.3 上进行了测试，我首先在其中看到了这个问题。

Answer 5

只需使用 border-spacing:0; 希望这能解决您的问题。

Answer 6

当浏览器缩放增加时，边框开始消失。我能够通过执行以下操作来解决它。在 Chrome 和 Firefox 中测试。

padding: 0.5px !important

Answer 7

我也遇到了同样的问题，缺少表格边框。
我的解决方案是：

table{
  border-collapse: collapse !important;
  border-spacing: 0px;
  border: 1px solid #DDD;
}

表格行的边框：

table tr{
  border-bottom: 1px solid #DDD !important;
}

我在布局中使用 Bootstrap，并且表格也有 Bootstrap css 类，例如“table table-striped table-bordered”

这个解决方案对我有用，当我尝试了解决方案，但

border-collapse: separate !important;

它对我来说不能正常工作。

Answer 8

为我实现答案@Donald Payne

*（.table - bootstrap class）

table.table {
    border-collapse: separate !important;
}

table.table tr,
table.table th,
table.table td {
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left: 1px solid #DDD !important;
    border-top: 1px solid #DDD !important;
}

table.table td:last-child,
table.table th:last-child {
    border-right: 1px solid #DDD !important;
}

table.table tr:last-child td {
    border-bottom: 1px solid #DDD !important;
}

table.table {
    border: 0 !important;
}

table.table thead tr:last-child th,
table.table thead tr:last-child td {
  border-bottom: 1px solid #DDD !important;
}

table.table tbody tr:first-child th,
table.table tbody tr:first-child td {
  border-top-width: 0 !important;
}

Answer 9

这有点离题，但对于那些在 Firefox 中搜索缺失边框的人来说……

我有一个表格行 () 的边框底部，在设置背景的地方缺失了一个特定的细胞。事实证明，这是由单元格上的恶意position:relative引起的，删除它（或将其更改为position:inherit）修复了它。

Firefox 70.0.1