在基于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