8

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

4

2 回答 2

5

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

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

于 2008-11-05T22:05:35.570 回答
0

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

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

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

于 2010-06-25T13:54:18.010 回答