CSS Firefox 中未显示边框，表格上的边框折叠，位置：tbody 上的相对，或单元格上的背景颜色

Question

提问by Peter

Consider the following HTML:

考虑以下 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>

Notice that the last cell has a left and a right border in its inline style. You (or at least I) would expect this to be visible. In IE, this is the case. But in Firefox (6), this is not. You can solve this by:

请注意，最后一个单元格的内联样式具有左右边框。您（或至少我）希望这是可见的。在 IE 中，情况就是这样。但在 Firefox (6) 中，情况并非如此。您可以通过以下方式解决此问题：

Removing position relative on div.datagrid table tbodyin the CSS
Changing div.datagrid table tbodyto div.datagrid tablein the CSS
Removing the background-coloron table.data td.priceCellin the CSS
Removing the border-collapseon div.datagrid tablein the CSS

移除div.datagrid table tbodyCSS 中的相对位置
在 CSS 中更改div.datagrid table tbody为div.datagrid table
删除CSS 中的background-colorontable.data td.priceCell
删除CSS 中的border-collapseondiv.datagrid table

This is a simplified version of our code; we also solved it (by choosing option 2). But what I'm wondering about is:

这是我们代码的简化版本；我们也解决了它（通过选择选项 2）。但我想知道的是：

Is this a bug in Firefox?
Is this a bug in IE?

这是 Firefox 中的错误吗？
这是 IE 中的错误吗？

And especially: what is the reason Firefox wouldn't show the borders when the CSS is as it is?

特别是：当 CSS 原样时，Firefox 不显示边框的原因是什么？

Answer 1

采纳答案by Boris Zbarsky

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.

对我来说，这看起来像是 Firefox 错误。背景在边界上绘制；如果您使用半透明的背景颜色，您可以看到它。

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

我提交了https://bugzilla.mozilla.org/show_bug.cgi?id=688556

Answer 2

回答by medoingthings

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

刚刚遇到这个问题并找到了一个仅使用 css 的解决方案：只需添加background-clip: padding-box到您的td元素中即可。

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

有关更多信息，请参阅本文：https: //developer.mozilla.org/en-US/docs/CSS/background-clip

Answer 3

回答by Ramiro Sánchez

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)

当您在带有折叠边框的表格内有一个相对位置的单元格时会产生问题（如鲍里斯指出并在错误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).

这可以使用由 user2342963 指示的 CSS 轻松解决（将 background-clip: padding-box 添加到单元格）。

You can see the problem (with Firefox) and the fix here: http://jsfiddle.net/ramiro_conductiva/XgeAS/

您可以在此处查看问题（使用 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>

Answer 4

回答by smitt04

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 tdcells to position: static. Hopefully that will help someone else.

这是 Firefox 中的一个错误，希望他们尽快修复它。但与此同时，我能够通过将我的td单元格设置为position: static. 希望这会帮助别人。

td {
    position: static;
}

Answer 5

回答by pekaaw

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

另一种可能的解决方案是更正表标记中的 colspan 错误。

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

显然，当使用 border-collapse:collapse; 时，colspan 错误会导致与隐藏边框相同的效果。

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

我通过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.

在我的表中，我写了 <th colspan="9"> 当只有 8 列时。

That caused error (hidden right border) in

这导致错误（隐藏的右边框）

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

Chrome 51.0.2704.103 m（64 位）
维瓦尔第 1.2.490.43 ()（32 位）

but rendered with right borders in

但在

Firefox 44.0.2
IE 11 (11.420.10586.0)
Edge 25.10586.0.0

火狐 44.0.2
IE 11 (11.420.10586.0)
边缘 25.10586.0.0

Answer 6

回答by Mike Dinder

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.

注意位置：“thead”和“tbody”元素中的相对属性，这些很重要。边框折叠和背景剪辑属性也是如此。在所有行和交替行上使用背景颜色。

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

Answer 7

回答by Katz

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:

为这个（旧）问题添加另一个解决方案：今天发生在我身上，因为我有一个带有多个 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>

CSS Firefox 中未显示边框，表格上的边框折叠，位置：tbody 上的相对，或单元格上的背景颜色

提问by Peter

采纳答案by Boris Zbarsky

回答by medoingthings

回答by Ramiro Sánchez

回答by smitt04

回答by pekaaw

回答by Mike Dinder

回答by Katz

相关推荐

最近更新

标签

CSS Firefox 中未显示边框，表格上的边框折叠，位置：tbody 上的相对，或单元格上的背景颜色

提问by Peter

采纳答案by Boris Zbarsky

回答by medoingthings

回答by Ramiro Sánchez

回答by smitt04

回答by pekaaw

回答by Mike Dinder

回答by Katz

相关推荐

Wordpress (3.8) 管理 UI 样式 CSS 类

CSS Webkit 背面可见性不起作用

CSS css过渡不透明度淡出背景

CSS 设置要显示的表格：块

相关推荐

最近更新

标签