Znikające obramowanie komórek tabeli CSS w przeglądarkach opartych na Gecko

Question

Mam bardzo specyficzny konstrukt tabel HTML, który wydaje się ujawniać błąd Gecko.

Oto destylowana wersja problemu. Obserwować poniższą tabelę w przeglądarce Gecko na bazie (FF, na przykład): (musisz skopiować i wkleić do nowego pliku)

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

w Jest to linia brakuje na „3” komórka z dołu po prawej stronie - wyświetl ją w dowolnej przeglądarce, a linia pojawi się zgodnie z oczekiwaniami. Co ciekawe, porzuć sekcję tabeli i zobacz, co otrzymamy:

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

To sprawia, że ​​działa. Czy ktoś to widział? Przypuszczam, że po prostu pozbędę się mojej sekcji thead na razie, ale to sprawia, że ​​stolik jest mniej dostępny.

Answer 1

Dziwne ... zdecydowanie błąd w malowaniu. Jeśli klikniesz prawym przyciskiem myszy, aby menu kontekstowe pojawiło się ponad część miejsca, w którym powinna być linia, wtedy po odrzucie menu kontekstowego, linia została przerysowana pod spodem.

Edit: Obejście - jeśli umieścisz style="border-color: ...;" na <td rowspan="3"> można uzyskać granicę do stawienia się, ale to musi być inny kolor - wystarczy użyć jednego, który jest tak blisko do innych, jak to możliwe. Na przykład, jeśli tabela to # ff0000, użyj # ff0001

Answer 2

również znalazłem ten błąd, ale nie jest on na moim komputerze, ale inny. Jeśli zmieniam rozmiar okna przeglądarki po określonej rozdzielczości, linie znikną. gdy tylko zmaksymalizuję okno, wszystko wyskoczy. możesz to naprawić na stałe, ustawiając border-collapse: separate; dzięki temu każda wiertarka każdej komórki ma swoją własną szerokość. To nie jest to, co chcę robić, ale działa.

Może to być również spowodowane użyciem obramowania obramowania: zwiń; następnie ustawienie wyrównania granic do 1px, a następnie 0px. Ponieważ załamuje granice, wydaje się priorytetem 0px na szerokość 1px.

tak czy inaczej to tylko firefox, a to kolejny powód, aby odejść od tego.