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

Posted 2023-03-06

【中文标题】在基于 Gecko 的浏览器中消失的 CSS 表格单元格边框

【英文标题】：Disappearing CSS table cell borders in Gecko-based browsers

【发布时间】：2010-09-20 23:31:21

【问题描述】：

我有一个非常具体的 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 部分作为一种解决方法，尽管它使表格不太容易访问。

【问题讨论】：

为了方便，第一个例子：jsfiddle.net/eahb2t90/2

【参考方案1】：

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

编辑：解决方法 - 如果您将 style="border-color: ...;" 放在 <td rowspan="3"> 上，您可以让边框出现，但它必须是 不同 颜色 - 只需使用与其他人尽可能。例如，如果表是#ff0000，则使用#ff0001

【参考方案2】：

我也发现了这个错误，但它不在我的电脑上，而是在另一台电脑上。如果我在一定分辨率后调整浏览器窗口的大小，线条将消失。一旦我最大化窗口，所有弹出。 你可以通过设置border-collapse:separate来永久修复这个问题；这使每个单元的每个边框都有自己的宽度。这不是我想做的，但它有效。

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

无论哪种方式，它都只是 firefox，这是远离它的另一个原因。