在 Firefox 中不显示边框，表格上的边框折叠，位置：tbody 上的相对或单元格上的背景颜色
Posted
技术标签:
【中文标题】在 Firefox 中不显示边框，表格上的边框折叠，位置：tbody 上的相对或单元格上的背景颜色【英文标题】：Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell 【发布时间】：2011-11-22 22:42:36 【问题描述】：考虑以下 html：
<html>
<head>
<style>
TABLE.data TD.priceCell
background-color: #EEE;
text-align: center;
color: #000;
div.datagrid table
border-collapse: collapse;
div.datagrid table tbody
position: relative;
</style>
</head>
<body>
<div id="contents" class="datagrid">
<table class="data" id="tableHeader">
<thead>
<tr class="fixed-row">
<th>Product</th>
<th class="HeaderBlueWeekDay">Price</th>
<th class="HeaderBlueWeekDay">Discount</th>
</tr>
</thead>
<tbody>
<tr style="font-style: italic;">
<td>Keyboard</td>
<td class="priceCell">20</td>
<td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>请注意，最后一个单元格的内联样式具有左右边框。您（或至少我）会期望这是可见的。在 IE 中，情况就是这样。但在 Firefox (6) 中，情况并非如此。您可以通过以下方式解决此问题：
在 CSS 中移除div.datagrid table tbody 的相对位置
在 CSS 中将 div.datagrid table tbody 更改为 div.datagrid table
删除 CSS 中 table.data td.priceCell 上的 background-color
删除 CSS 中 div.datagrid table 上的 border-collapse
这是我们代码的简化版本；我们也解决了它（通过选择选项 2）。但我想知道的是：
这是 Firefox 中的错误吗？ 这是 IE 中的错误吗？尤其是：当 CSS 保持原样时，Firefox 不显示边框的原因是什么？
【问题讨论】：
不要问我为什么，但是当我将border-collapse 属性从div.datagrid table 移动到上面CSS 中的table.data 本身时，它工作正常。也许这里有其他人可以解释......（我在 Firefox 5 上）
我没有回答你的问题。我怀疑这是一个错误，因为相对定位不应该影响边框，但我做了一个简化的测试用例，所有 4 个浏览器都以不同的方式显示它！ （Fx6，Op 11.50，IE8，Chrome 15）这里的测试用例：jsfiddle.net/76Qb7/9
刚刚遇到了这个问题……有趣的是，Firefox 的错误在这样的时间跨度内仍然存在。
【参考方案1】：
刚刚遇到这个问题并找到了一个仅使用 CSS 的解决方案：
只需将 background-clip: padding-box 添加到您的 td 元素即可。
查看这篇文章了解更多信息：https://developer.mozilla.org/en-US/docs/CSS/background-clip
【讨论】：
呃，我不明白。文档说它指定背景是否延伸 underneath 边界。我觉得它呈现在边框顶部。 我找到的最好的纯 CSS 解决方案。感谢分享@medoingthings【参考方案2】：对我来说，这看起来像是一个 Firefox 错误。背景画在边界上；如果您使用半透明背景颜色，您可以看到它。
我提交了https://bugzilla.mozilla.org/show_bug.cgi?id=688556
【讨论】：
我遇到了同样的问题。它仍然没有被 Firefox 修复。似乎他们没有认真对待它，而在使用 :nth-child(odd) 选择器以及仅向奇数行添加背景时这是一个很大的设计问题。我也需要边框以使其完美。感谢您提交错误！ 仅供参考，9 年后仍然有效。【参考方案3】：只是把所有东西放在一个地方。
当您有一个具有折叠边框的表格内具有相对位置的单元格时会产生问题（如 Boris 所示并填写了错误 https://bugzilla.mozilla.org/show_bug.cgi?id=688556）
如 user2342963 所示，这可以使用 CSS 轻松解决（将 background-clip: padding-box 添加到单元格）。
您可以在此处查看问题（使用 Firefox）和修复：http://jsfiddle.net/ramiro_conductiva/XgeAS/
table border-spacing: 0px;
td border: 1px solid blue; background-color: yellow; padding: 5px;
td.cellRelative position: relative;
td.cellRelativeFix background-clip: padding-box;
table.tableSeparate border-collapse: separate;
table.tableCollapse border-collapse: collapse;
<table class="tableSeparate">
<tbody>
<tr>
<td class="cellRelative">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>
<table class="tableCollapse">
<tbody>
<tr>
<td class="cellRelative">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>
<table class="tableCollapse">
<tbody>
<tr>
<td class="cellRelative cellRelativeFix">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>
【讨论】：
这可以修复 FF 中的错误，但在 IE 中，常规边框内有一个难看的白色边框，我们如何修复它？【参考方案4】：这是 Firefox 中的一个错误，希望他们尽快修复它。但与此同时，我可以通过将td 单元格设置为position: static 来为我解决此问题。希望这对其他人有帮助。
td
position: static;
【讨论】：
如果你在同一个td 上使用::before 或::after 之类的伪元素，position: static 会使这些样式混乱。 background-clip: padding-box 更安全。【参考方案5】：
另一种可能的解决方案是更正表格标记中的 colspan 错误。
在使用border-collapse:collapse时，显然colspan错误会导致与隐藏边框相同的效果；
我通过http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html 被引导到正确的解决方案。
在我的表中，我写了
这导致了错误（隐藏的右边框）
Chrome 51.0.2704.103 m（64 位） Vivaldi 1.2.490.43 ()（32 位）但在
中以右边框呈现 Firefox 44.0.2 IE 11 (11.420.10586.0) 边缘 25.10586.0.0【讨论】：
移除边框折叠：从表格元素折叠对我们有帮助 其他语法错误显然也会触发此问题。考虑到@pekaaw 的建议，我校对了我的HTML，发现我有<thead>，而我本来应该有</thead>。修正那个错字修正了边框问题！
解决这个问题的最好方法是做这样的事情。
注意位置：“thead”和“tbody”元素中的相对属性，这些很重要。border-collapse 和 background-clip 属性也是如此。适用于所有行和交替行的背景颜色。
table
width: 100% !important;
border-spacing: 0;
border-collapse: unset !important;
thead
position: relative;
left: -1px;
top: -1px;
tr
th
background-clip: padding-box;
border-top: 1px solid #737373!important;
border-left: 1px solid #737373!important;
border-right: none !important;
border-bottom: none !important;
&:last-child
border-right: 1px solid #737373!important;
tbody
position: relative;
left: -1px;
top: -1px;
tr
&:last-child
td
border-bottom: 1px solid #737373!important;
td
background-clip: padding-box;
border-top: 1px solid #737373!important;
border-left: 1px solid #737373!important;
border-right: none !important;
border-bottom: none !important;
&:last-child
border-right: 1px solid #737373!important;
【讨论】：
【参考方案7】：为这个（旧）问题添加另一个解决方案：今天发生在我身上，因为我有一个包含多个 tbody 的有点复杂的表。 唯一的问题实际上是我打开了一个未关闭的 tbody 标签。我删除了该标签，边框重新出现，无需更改我的 CSS 中的任何内容。 澄清一下，我的结构是这样的：
<table>
<thead>
<tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tbody>
<tbody>
<tr><td>Val1</td><td>Val2</td></tr>
<tr><td>Val3</td><td>Val4</td></tr>
</tbody>
</table>【讨论】：
【参考方案8】：对我来说添加边框折叠属性来分隔内部表格解决了这个问题
像这样：
margin-bottom: 0;
color: #333333;
font-family: "Poppins", sans-serif !important;
border-collapse: separate;
在 chrome 中，我们不需要设置这个属性，即使不提也可以正常工作。
【讨论】：
【参考方案9】：表体不应该有 “位置”：“相对”。
【讨论】：
以上是关于在 Firefox 中不显示边框，表格上的边框折叠，位置：tbody 上的相对或单元格上的背景颜色的主要内容，如果未能解决你的问题，请参考以下文章