Desaparecendo bordas das células de tabela CSS em navegadores baseados no Gecko

Question

Eu tenho uma tabela construção html muito específico que parece revelar um bug Gecko.

Aqui está uma versão destilada do problema. Observe a tabela a seguir em um navegador baseado em Gecko (FF, por exemplo): (você vai ter que copiar e colar este em um novo arquivo)

<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>

Há uma linha em falta sobre o "3" na célula inferior direita - vê-la em qualquer outro navegador e a linha vai aparecer como esperado. Curiosamente, vala a seção thead da mesa e olha o que temos:

<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>

fazer isso faz com que funcione. Alguém viu isso? Acho que eu vou me livrar da minha seção thead por agora como uma solução que faz a mesa um pouco menos acessível.

Answer 1

Estranho ... definitivamente um erro de pintura. Se você clicar com o botão direito para obter o menu de contexto para aparecer ao longo do parte de onde a linha deve ser, então, quando você descartar o menu de contexto, a linha tem sido debaixo redesenhado.

Edit: Solução - se você colocar style="border-color: ...;" na <td rowspan="3"> você pode obter a fronteira para aparecer, mas tem que ser um diferente cor - basta usar um que é tão perto dos outros quanto possível. Por exemplo, se a tabela é # ff0000 usar # ff0001

Answer 2

Eu também encontrei este bug, mas não é no meu PC, mas outra. Se eu redimensionar a janela do navegador após um determinado resolução das linhas desaparecerá. uma vez que eu maximizar a janela de todos de volta pop. você pode corrigir isso permanentemente, definindo border-collapse: separada; Isso dá a cada boreder de cada célula a sua própria largura. Não é o que eu quero fazer, mas ele funciona.

Ele também pode ser causado pelo uso de border-collapse: colapso; em seguida, definindo as fronteiras alinhando para 1px e depois 0px. Porque ele recolhe as fronteiras parece priorizar a 0px sobre a largura de 1px.

De qualquer maneira é firefox única e é mais um motivo para afastar-se dela.