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

Answer 2

我也发现了这个错误，但它不是在我的电脑上，而是另一个。如果我在确定分辨率后调整浏览器窗口大小，这些行将消失。一旦我最大化窗口弹出所有回弹。 你可以通过设置border-collapse来永久解决这个问题：separate;这使每个单元的每个镗孔具有其自己的宽度。这不是我想要做的，但它的工作原理。

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

无论哪种方式它只是Firefox，它是另一个离开它的理由。