Biến mất đường viền ô CSS trong các trình duyệt dựa trên Gecko

Question

Tôi có một cấu trúc bảng html rất cụ thể dường như để lộ một lỗi Gecko.

Đây là phiên bản chưng cất của sự cố. Quan sát bảng sau trong trình duyệt tắc kè-based (FF, ví dụ): (bạn sẽ phải sao chép và dán vào một tập tin mới)

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

Có một dòng thiếu so với "3" trong ô dưới cùng bên phải - xem nó trong bất kỳ trình duyệt nào khác và dòng sẽ xuất hiện như mong đợi. Thật thú vị, mương phần thead của bảng và xem những gì chúng tôi nhận được:

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

Làm điều đó làm cho nó hoạt động. Có ai nhìn thấy điều này không? Tôi cho rằng tôi sẽ loại bỏ phần thead của tôi bây giờ như một giải pháp thay vì nó làm cho bảng thay vì ít truy cập hơn.

Answer 1

Lạ ... chắc chắn là lỗi vẽ. Nếu bạn nhấp chuột phải để trình đơn ngữ cảnh xuất hiện trên một phần của vị trí của dòng, sau đó khi bạn loại bỏ menu ngữ cảnh, dòng đã được vẽ lại bên dưới.

Edit: Giải pháp - nếu bạn đặt style="border-color: ...;" trên <td rowspan="3"> bạn có thể nhận biên giới xuất hiện, nhưng nó có phải là một màu sắc khác nhau - chỉ cần sử dụng một trong đó là càng gần với những người khác càng tốt. Ví dụ: nếu bảng là # ff0000 sử dụng # ff0001

Answer 2

tôi cũng đã tìm thấy lỗi này nhưng không phải trên máy tính của tôi mà là lỗi khác. Nếu tôi thay đổi kích thước cửa sổ trình duyệt sau một độ phân giải nhất định thì các dòng sẽ biến mất. một khi tôi tối đa hóa cửa sổ, tất cả cửa sổ bật lên trở lại. bạn có thể sửa lỗi này vĩnh viễn bằng cách đặt border-collapse: tách biệt; điều này cho mỗi nhàm chán của mỗi tế bào chiều rộng của riêng nó. Nó không phải là những gì tôi muốn làm nhưng nó hoạt động.

Nó cũng có thể được gây ra bằng cách sử dụng thu gọn biên giới: thu gọn; sau đó đặt sắp xếp đường viền thành 1px và sau đó là 0px. Bởi vì nó sụp đổ các biên giới có vẻ như ưu tiên 0px trên chiều rộng 1px.

hoặc là chỉ là firefox và đó là một lý do khác để di chuyển khỏi nó.