Borders không được hiển thị trong Firefox với border-collapse trên bàn, position: relative trên tbody, hoặc background-color trên tế bào

Hãy xem xét đoạn HTML sau:Borders không được hiển thị trong Firefox với border-collapse trên bàn, position: relative trên tbody, hoặc background-color trên tế bào

<html> 
 
<head> 
 
    <style> 
 
     TABLE.data TD.priceCell 
 
     { 
 
      background-color: #EEE; 
 
      text-align: center; 
 
      color: #000; 
 
     } 
 
    
 
     div.datagrid table 
 
     { 
 
      border-collapse: collapse; 
 
     } 
 
    
 
     div.datagrid table tbody 
 
     { 
 
      position: relative; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="contents" class="datagrid"> 
 
     <table class="data" id="tableHeader"> 
 
      <thead> 
 
       <tr class="fixed-row"> 
 
        <th>Product</th> 
 
        <th class="HeaderBlueWeekDay">Price</th> 
 
        <th class="HeaderBlueWeekDay">Discount</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr style="font-style: italic;"> 
 
        <td>Keyboard</td> 
 
        <td class="priceCell">20</td> 
 
        <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</body> 
 
</html>

ý rằng ô cuối cùng có đường viền trái và phải theo kiểu nội tuyến của nó. Bạn (hoặc ít nhất là tôi) sẽ mong đợi điều này được hiển thị. Trong IE, đây là trường hợp. Nhưng trong Firefox (6), điều này là không. Bạn có thể giải quyết điều này bằng cách:

Loại bỏ vị trí tương đối trên div.datagrid table tbody trong CSS
Thay đổi div.datagrid table tbody-div.datagrid table trong CSS
Loại bỏ các background-color trên table.data td.priceCell trong CSS
Loại bỏ các border-collapse trên div.datagrid table trong CSS

Đây là phiên bản đơn giản của mã của chúng tôi; chúng tôi cũng đã giải quyết nó (bằng cách chọn tùy chọn 2). Nhưng điều tôi đang thắc mắc là:

Đây có phải là lỗi trong Firefox không?
Đây có phải là lỗi trong IE không?

Và đặc biệt: lý do Firefox sẽ không hiển thị đường viền khi CSS là như thế nào?

Nguồn

2011-09-22 Peter

Đừng hỏi tôi tại sao, nhưng khi tôi chuyển 'sở hữu cửa collapse' từ' table' div.datagrid vào 'table.data' chính nó trong CSS ở trên, nó hoạt động ổn. Có thể có ai khác ở đây có thể giải thích ... (Tôi đang sử dụng Firefox 5) – compostus

Tôi không có câu trả lời cho câu hỏi của bạn. Tôi nghi ngờ đây là một lỗi, vì vị trí tương đối không nên ảnh hưởng đến biên giới, nhưng tôi đã thực hiện một trường hợp thử nghiệm đơn giản và tất cả 4 trình duyệt hiển thị nó khác nhau! (Fx6, Op 11,50, IE8, Chrome 15) Kiểm tra trường hợp tại đây: http://jsfiddle.net/76Qb7/9/ – Doug

Điều này trông giống như lỗi của Firefox đối với tôi. Các hình nền được vẽ trên các biên giới; bạn có thể thấy nó nếu bạn sử dụng màu nền mờ.

Tôi nộp https://bugzilla.mozilla.org/show_bug.cgi?id=688556

Nguồn

2011-09-22 18:50:50

Kudo để nộp lỗi. – Peter

Tôi đã chạy trong cùng một vấn đề. Nó vẫn chưa được Firefox cố định. Có vẻ như họ không coi nó đủ nghiêm trọng trong khi nó là một vấn đề thiết kế lớn khi sử dụng bộ chọn nth-child (odd) cũng như thêm một nền cho chỉ những hàng lẻ. Tôi cần biên giới để làm cho nó hoàn hảo. Thansk để nộp lỗi! – Jelmer

Đây là bản dupe của https://bugzilla.mozilla.org/show_bug.cgi?id=63895 – DriverDan

113

Chỉ cần chạy vào vấn đề này và đến một css chỉ giải pháp: chỉ cần thêm background-clip: padding-box đến yếu tố td của bạn.

Xem bài viết này để biết thêm thông tin: https://developer.mozilla.org/en-US/docs/CSS/background-clip

Nguồn

2013-05-02 11:42:51 medoingthings

Huh, tôi không hiểu. Các tài liệu nói nó chỉ định liệu nền có kéo dài * bên dưới * đường viền hay không. Tôi nhận được ấn tượng nó được hiển thị trên đầu trang của biên giới. – Peter

+12

Bạn vừa mới cứu tôi một cảm giác đau đầu thực sự, cảm ơn! –

Giải pháp duy nhất CSS tôi đã tìm thấy. Cảm ơn bạn đã chia sẻ @medoingthings – helpse

Đây là một lỗi trong firefox và hy vọng họ sửa chữa nó ngay. Nhưng trong thời gian đó, tôi có thể khắc phục sự cố này cho tôi bằng cách đặt các ô td của tôi thành position: static. Hy vọng rằng sẽ giúp đỡ người khác.

td { 
    position: static; 
}

Nguồn

2013-09-15 03:49:38 smitt04

Hoàn hảo! Nó hoạt động tuyệt vời. – Steffi

Nếu bạn sử dụng các phần tử giả như ':: before' hoặc' :: after' trên cùng 'td',' position: static' sẽ làm rối loạn các kiểu tạo kiểu này. 'background-clip: padding-box' là an toàn hơn. – Sebsemillia

Chỉ cần đặt tất cả ở một nơi.

Vấn đề là tạo ra khi bạn có một phòng giam với vị trí tương đối trong một bảng với biên giới sụp đổ (như Boris chỉ ra và điền vào các lỗi https://bugzilla.mozilla.org/show_bug.cgi?id=688556)

Điều này có thể dễ dàng giải quyết sử dụng CSS như được chỉ ra bởi user2342963 (Thêm background-clip: padding-box vào ô).

Bạn có thể thấy vấn đề (với Firefox) và sửa chữa ở đây: http://jsfiddle.net/ramiro_conductiva/XgeAS/

table {border-spacing: 0px;} 
td {border: 1px solid blue; background-color: yellow; padding: 5px;} 
td.cellRelative {position: relative;} 
td.cellRelativeFix {background-clip: padding-box;} 
table.tableSeparate {border-collapse: separate;} 
table.tableCollapse {border-collapse: collapse;} 

<table class="tableSeparate"> 
    <tbody> 
     <tr> 
      <td class="cellRelative">position: relative</td> 
      <td>position: static</td> 
     </tr> 
    </tbody> 
</table> 
<table class="tableCollapse"> 
    <tbody> 
     <tr> 
      <td class="cellRelative">position: relative</td> 
      <td>position: static</td> 
     </tr> 
    </tbody> 
</table> 
<table class="tableCollapse"> 
    <tbody> 
     <tr> 
      <td class="cellRelative cellRelativeFix">position: relative</td> 
      <td>position: static</td> 
     </tr> 
    </tbody> 
</table>

Nguồn

2013-09-27 09:23:43

Điều này hoạt động để sửa lỗi trong FF nhưng trong IE có một biên giới màu trắng xấu xí bên trong biên giới thường xuyên như thế nào để chúng tôi sửa lỗi đó? –

Một giải pháp khả thi là để sửa lỗi colspan trong đánh dấu bảng của bạn.

Rõ ràng các lỗi colspan có thể gây ra các hiệu ứng tương tự với đường viền ẩn khi sử dụng thu hẹp đường biên: thu gọn;

Tôi được chuyển hướng đến giải pháp phù hợp thông qua http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html.

Trong bảng tôi đã viết < th colspan = "9" > khi chỉ có 8 cột.

Điều đó gây ra lỗi (ẩn biên giới phải) trong

Chrome 51.0.2704.103 m (64-bit)
Vivaldi 1.2.490.43() (32-bit)

nhưng render với biên giới ngay trong

Firefox 44.0.2
IE 11 (11.420.10586.0)
Cạnh 25.10586.0.0

Nguồn

2016-07-13 12:17:46 pekaaw

Xóa thu hẹp đường viền: thu gọn từ yếu tố bảng đã giúp chúng tôi –

Borders không được hiển thị trong Firefox với border-collapse trên bàn, position: relative trên tbody, hoặc background-color trên tế bào

Trả lời

Các vấn đề liên quan