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

我使用的是Firefox 3.5.7，并且我在多个HTML表格中使用了相同的CSS，但有一些示例没有显示部分边框。为什么Firefox在某些HTML表格上缺少边界

对我来说毫无意义的是，在另一个HTML表格的相同页面上的相同CSS工作正常。此外，Internet Explorer中的同一页面从边界角度来看看效果不错。

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

有没有人有一个线索，为什么这会发生在这里？

2010-01-14 leora

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

为了解决这个问题，只打按Ctrl + 或做查看>放大>重置重置缩放级别为默认值。

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

来源

2010-01-14 02:22:18 BalusC

你是对的。。这样可行。但我仍然没有得到它。为什么会放大删除一些边界，但不是别人？ – leora 2010-01-14 02:24:46

很难削弱一个像素粗线的厚度。如上所述，这只是一种错误的渲染行为。 – BalusC 2010-01-14 02:27:17

举一个例子，试着缩小你现在面对的SO页面。你会发现上面的'最古老'，'最新'和/或'投票'这样的选项卡实际上会在某些级别上失去边界底部。 – BalusC 2010-01-14 02:34:21

这是由表格（带有缺失的底部边框）引起的一个div引起的......边框显然没有在表格高度计算，所以边框在那里但没有显示。

从1px为周围div设置margin-bottom解决了问题。

来源

2010-11-19 13:09:38 Tom

在我正在处理的应用程序中，在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用户，但它可以用于工作所有的浏览器，我都没有测试过。

来源

2011-01-19 03:41:14 GregL

只是为了公平，这个问题不是由边框崩溃引起的，它是由[firefox bug]引起的（https://bugzilla.mozilla.org/show_bug .cgi？id = 410959）这是十年前的报道（待解决，与许多旧报告的Firefox bug一样） – Sebastianb 2018-01-11 19:04:27

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

来源

2013-07-12 10:41:53

当浏览器缩放增加时边框开始丢失。我能够通过以下方式解决它。经过Chrome和Firefox测试。

padding: 0.5px !important

来源

2014-09-22 04:26:25

我曾与失踪表格边框同样的问题。我的解决办法是：

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

和边境表格行：

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

我使用的引导无论是在我的布局和工作台还具有引导CSS类，如“表的表条纹表 - 镶上”

该解决方案适用于我，当我试图与

border-collapse: separate !important;

解决方案

它不适合我。

来源

2015-01-23 12:33:29 vanrado

大厦@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。 Chrome v.4.0，Firefox v 3.0，IE 7.0，Safari v.3.1和Opera v.9.6（）中的:first-child是said to be supported。测试Firefox v。40.0.3，我首先看到了这个问题。

来源

2015-09-03 19:21:07

工作对我的回答@Donald佩恩的实现

*（。表 - 引导类）

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; 
}

来源

2017-06-08 08:34:39

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

回答

相关问题