Firefox中未显示边框，表格，位置：边框相对于tbody或背景色位于边框

Question 1

考虑以下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）中，事实并非如此。您可以通过以下方法解决此问题：

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

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

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

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

Question 2

在我看来，这似乎是一个Firefox错误。背景画在边界上。如果使用半透明的背景色，则可以看到它。

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

Question 3

刚遇到这个问题，并提出了一个仅限CSS的解决方案：只需添加background-clip: padding-box到您的td元素中即可。

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

Question 4

只是将所有内容放在一起。

当您的单元格在具有折叠边框的表格中具有相对位置的单元格时，就会产生此问题（如鲍里斯所指出并填写了错误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>

Question 5

这是firefox中的错误，希望他们尽快修复。但是同时我可以通过将td单元设置为来为我解决这个问题position: static。希望这会对别人有所帮助。

td {
    position: static;
}

Question 6

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

显然，在使用border-collapse时，colspan错误会导致隐藏边框产生相同的效果：

通过http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html定向到了正确的解决方案。

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

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

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

Question 7

解决此问题的最佳方法是执行以下操作。

注意位置：“ thead”和“ tbody”元素中的相对属性很重要。border-collapse和background-clip属性也是如此。在所有行和交替行上都使用background-color。

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

Question 8

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

展开摘要