基于 Gecko 的浏览器中 CSS 表格单元格边框消失

Question

我有一个非常具体的 html 表结构，似乎揭示了 Gecko 错误。

这是问题的精炼版本。 在基于 gecko 的浏览器（例如 FF）中观察下表：（您必须将其复制并粘贴到新文件中）

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>          
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

右下角单元格中的“3”上方缺少一行 -- view在任何其他浏览器中，该行都会按预期显示。 有趣的是，丢掉表格的标题部分，看看我们得到了什么：

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

这样做就可以了。 有人见过这个吗？ 我想我现在将删除我的 thead 部分作为一种解决方法，尽管它使表格更难以访问。

Answer 1

我也发现了这个错误，但它不在我的电脑上，而是在另一台电脑上。 如果我在达到一定分辨率后调整浏览器窗口的大小，这些线条就会消失。 一旦我最大化窗口，所有内容都会弹出。
您可以通过设置 border-collapse:separate; 永久修复此问题 这为每个单元格的每个钻孔提供了自己的宽度。 这不是我想做的，但它有效。

也可能是由于使用 border-collapse:collapse; 引起的 然后将对齐边框设置为 1px，然后设置为 0px。 因为它折叠了边框，所以似乎优先考虑 0px 宽度而不是 1px 宽度。

不管怎样，它只是 Firefox，这也是放弃它的另一个原因。

Answer 2

奇怪……绝对是绘画错误。 如果您右键单击以使上下文菜单出现在线条应在的位置的部分上方，那么当您关闭上下文菜单时，线条将在下面重新绘制。

编辑：解决方法 - 如果将 style="border-color: ...;" 放在 上，您可以获得边框出现，但它必须是不同的颜色 - 只需使用尽可能接近其他颜色的颜色即可。 例如，如果表是#ff0000，则使用#ff0001