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

小编典典

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

css

考虑以下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不显示边框的原因是什么？

阅读 245

2020-05-16

共1个答案

小编典典

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

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

2020-05-16