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

奇怪......绝对是一个画虫。如果右键单击以使上下文菜单显示在该行所在位置的 part 上，则当您关闭上下文菜单时，该行已在下方重新绘制。

修改：解决方法 - 如果您将style="border-color: ...;"放在<td rowspan="3">上，您可以显示边框，但它必须是不同的颜色 - 只需使用一个尽可能接近其他人。例如，如果表格是＃ff0000，请使用＃ff0001

Answer 2

我也发现了这个错误，但它不在我的电脑上而是另一个。如果我在一定分辨率后调整浏览器窗口大小，则线条将消失。一旦我最大化窗口全部回弹。你可以通过设置border-collapse来永久修复它：单独;这给每个单元的每个钻孔器自己的宽度。这不是我想做的，但它有效。

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

无论哪种方式它只是firefox而且它是摆脱它的另一个原因。

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

2 个答案: