Firefox中没有显示边框,表格上有边框折叠,位置:tbody上的相对或单元格上的背景颜色

时间:2011-09-22 15:12:18

标签: css firefox border

考虑以下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中background-color上的table.data td.priceCell
  • 删除CSS中border-collapse上的div.datagrid table

这是我们代码的简化版本;我们也解决了它(通过选择选项2)。但我想知道的是:

  • 这是Firefox中的错误吗?
  • 这是IE中的错误吗?

尤其是:当CSS原样时,Firefox不会显示边框的原因是什么?

7 个答案:

答案 0 :(得分:148)

刚遇到这个问题,并找到了一个仅限CSS的解决方案: 只需将background-clip: padding-box添加到您的td元素。

有关详细信息,请参阅此文章:https://developer.mozilla.org/en-US/docs/CSS/background-clip

答案 1 :(得分:57)

这对我来说就像是一个Firefox错误。背景是在边界上绘画;如果你使用半透明的背景颜色,你可以看到它。

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

答案 2 :(得分:12)

只是将所有人放在一个地方。

当您在具有折叠边框的表格中具有相对位置的单元格时会产生问题(如Boris指示并填充错误https://bugzilla.mozilla.org/show_bug.cgi?id=688556

这可以使用CSS轻松解决,如user2342963所示(将背景剪辑:填充框添加到单元格中)。

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

答案 3 :(得分:8)

这是firefox中的一个错误,希望他们能尽快修复它。但与此同时,我可以通过将td单元格设置为position: static来解决此问题。希望这会有助于其他人。

td {
    position: static;
}    

答案 4 :(得分:2)

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

使用边框折叠时,显然colspan错误会导致与隐藏边框相同的效果:折叠;

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

在我的表格中我写了&lt; th colspan =“9”&gt;当只有8列时。

导致错误(隐藏右边框)

  • Chrome 51.0.2704.103 m(64位)
  • Vivaldi 1.2.490.43()(32位)

但在

中使用右边框渲染
  • Firefox 44.0.2
  • IE 11(11.420.10586.0)
  • Edge 25.10586.0.0

答案 5 :(得分:1)

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

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

A

答案 6 :(得分:0)

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