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

Question

我使用的是Firefox 3.5.7,并且我在多个HTML表格中使用了相同的CSS,但是有些示例中没有显示部分边框.

对我来说没有意义的是,另一个HTML表格在同一页面上的相同CSS工作正常.此外,从边界的角度来看,Internet Explorer中的同一页面看起来很好.

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

有没有人知道为什么会发生这种情况？

Answer 1

也许你已经放大/缩小了一点.当您执行Ctrl+ Scrollwheel 时,这可能会意外或有意识地发生.也许它没有完全重置为缩放级别零.然后,在某些网站上也可以识别这种错误呈现行为,也在SO处.

要解决此问题,只需按Ctrl+ 0或执行视图 > 缩放 > 重置将缩放级别重置为默认值.

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

Answer 2

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

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

将其更改为separate修复问题.但是,这意味着我必须重新考虑边框应用于桌子各个部分的方式,因为否则边框的厚度看起来会加倍.我最终不得不使用jQuery给一个特殊的"最后"类提供给最后一个td或th每个tr,以及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用户,但它可能适用于所有浏览器,我还没有测试过.