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

或单元格上的背景颜色

关注

发信

关注(28)粉丝(399)

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

本文介绍了Firefox 中未显示边框，表格上的边框折叠，位置:tbody 上的相对，或单元格上的背景颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

考虑以下 HTML:

<头><风格>TABLE.data TD.priceCell{背景颜色:#EEE；文本对齐:居中；颜色:#000；}div.datagrid 表格{边框折叠:折叠；}div.datagrid 表格 tbody{位置:相对；}</风格><身体><div id="contents" class="datagrid"><table class="data" id="tableHeader"><头><tr class="fixed-row"><th>产品</th><th class="HeaderBlueWeekDay">价格</th><th class="HeaderBlueWeekDay">折扣</th></tr></thead><tr style="font-style: italic;"><td>键盘</td><td class="priceCell">20</td><td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;"class="priceCell">2</td></tr></tbody>

</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).但我想知道的是:

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

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

解决方案

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

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

Consider the following 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:

Removing position relative on div.datagrid table tbody in the CSS
Changing div.datagrid table tbody to div.datagrid table in the CSS
Removing the background-color on table.data td.priceCell in the CSS
Removing the border-collapse on div.datagrid table in the CSS

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

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

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

解决方案

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

这篇关于Firefox 中未显示边框，表格上的边框折叠，位置:tbody 上的相对，或单元格上的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-15 16:35