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

Posted 2023-03-05

【中文标题】为啥 Firefox 缺少某些 HTML 表格的边框

【英文标题】：Why is Firefox missing the border on some HTML tables为什么 Firefox 缺少某些 HTML 表格的边框

【发布时间】：2011-01-04 22:17:40

【问题描述】：

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

对我来说没有意义的是，同一页面上的相同 CSS 用于另一个 HTML 表格可以正常工作。此外，从边界的角度来看，Internet Explorer 中的同一页面看起来不错。

这是一个带有示例的图像，您可以在这种情况下看到第一个表格的底部缺少边框。

有人知道为什么会在这里发生吗？

【参考方案1】：

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

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

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

【讨论】：

你是对的。 .这样可行。但我还是不明白。 .为什么缩放会删除一些边框而不是其他边框？？

一像素粗线的粗细很难减半。如前所述，这只是一种错误渲染行为。

例如，尝试缩小您现在所面对的 SO 页面。您会看到上面的标签oldest、newest 和/或votes 在某些级别实际上会失去它们的边界底部。

有趣。 .我想这是有道理的。 .但我仍然希望它在相同大小的元素中保持一致..所以我希望每个表格都一致地失去其边框

不，当然不是。如果你从例如收缩800px 高度到 799px 高度，那么仍然只有 1px 的线可以被丢弃。

【参考方案2】：

这是由于表格（缺少底部边框）在 div 内造成的...边框显然没有在表格高度中计算，所以边框在那里但没有显示。

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

【参考方案3】：

我在 Firefox 中缩小我正在处理的应用程序时发现了类似的问题。

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

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

$('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 用户，但它可能适用于所有浏览器，我尚未测试。

【讨论】：

公平地说，这个问题不是由边界崩溃“引起”的，它是由十年前报告的firefox bug 引起的（待修复，与许多旧报告的 firefox 错误一样）

【参考方案4】：

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

【参考方案5】：

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

padding: 0.5px !important

【参考方案6】：

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

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

表格行的边框：

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

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

当我尝试使用

解决方案时，此解决方案对我有用

border-collapse: separate !important;

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

【参考方案7】：

基于@GregL 的好回答（我似乎无法直接“评论”它）： 我没有使用 JQuery 生成“last”类，而是简单地使用了内置的伪元素选择器: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 () 中是 said to be supported。在 Firefox v. 40.0.3 上测试，我首先看到了这个问题。

【参考方案8】：

为我实现了答案@Donald Payne

*(.table - 引导类)

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;

【参考方案9】：

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

我有一个表格行 (<tr>) 的边框底部在特定单元格上设置了背景的位置丢失。原来这是由单元格上的流氓position: relative 引起的，将其删除（或将其更改为position: inherit）修复了它。

火狐 70.0.1