css - 在基于 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”上方缺少一行——在任何其他浏览器中查看它，该行将按预期显示。有趣的是，去掉表格的 thead 部分，看看我们得到了什么:

<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

奇怪...绝对是绘画错误。如果您右键单击以使上下文菜单出现在该行所在位置的部分上，那么当您关闭上下文菜单时，该行已在下方重新绘制。

编辑:解决方法 - 如果您输入 style="border-color: ...;"在 <td rowspan="3"> 上您可以显示边框，但它必须是不同 颜色 - 只需使用尽可能接近其他颜色的颜色即可。例如，如果表是#ff0000 使用#ff0001