Firefox 中没有显示边框，边框在表格、位置: 相对于主体或单元格的背景颜色上折叠

考虑下面的 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)。但我想知道的是:

  • 这是火狐里的一个 bug 吗？
  • 这是 IE 里的 bug 吗？

特别是: 当 CSS 保持原样时，Firefox 为什么不显示边框？

53074 次浏览
小开
最佳答案

This looks like a Firefox bug to me. The backgrounds are painting over the borders; you can see it if you use a translucent background color.

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=688556

小开

Just ran into this issue and came to a css only solution: just add background-clip: padding-box to your td element.

See this article for more information: https://developer.mozilla.org/en-US/docs/CSS/background-clip

小开

This is a bug in firefox and hopefully they fix it soon. But in the mean time I was able to fix this issue for me by setting my td cells to position: static. Hopefully that will help someone else.

td {
position: static;
}
小开

Just to put all in one place.

The problem is produced when you have a cell with position relative inside a table with collapsed borders (as Boris indicated and filled in the bug https://bugzilla.mozilla.org/show_bug.cgi?id=688556)

This can be easily solved using CSS as indicated by user2342963 (Adding background-clip: padding-box to the cell).

You can see the problem (with Firefox) and the fix here: 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>
小开

Another possible solution is to correct colspan errors in your table markup.

Apparently can colspan errors cause the same effects with hidden borders when using border-collapse: collapse;

I was directed to the right solution through http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html.

In my table I had written <th colspan="9"> when there was only 8 columns.

That caused error (hidden right border) in

  • Chrome 51.0.2704.103 m (64-bit)
  • Vivaldi 1.2.490.43 () (32-bit)

but rendered with right borders in

  • Firefox 44.0.2
  • IE 11 (11.420.10586.0)
  • Edge 25.10586.0.0
小开

The best way to solve this issue is to do something like this.

Note the position: relative property in the "thead" and the "tbody' elements, those are important. So are the border-collapse and background-clip properties. Works with background-color on all and alternating rows.

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

Adding another solution for this (old) issue: This happened to me today, because I have a somewhat complicated table with multiple tbody. The only issue was actually that I had an opened tbody tag that was not closed. I deleted that tag and the borders re-appeared, without needing to change anything in my CSS. To clarify, my structure was something like:

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

小开

For me add border-collapse attribute to separate inside table solved the problem

Like this:

margin-bottom: 0;
color: #333333;
font-family: "Poppins", sans-serif !important;
border-collapse: separate;

Where as in chrome, we don't need to set this attribute and works fine even without mentioning too.

小开

The table body should not have "position":"relative".


提交答案