Đường viền không được hiển thị trong Firefox với đường viền thu gọn trên bảng, vị trí: tương đối trên thân hoặc màu nền trên ô

Question 1

Hãy xem xét HTML sau:

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

Mở rộng đoạn mã

Lưu ý rằng ô cuối cùng có đường viền bên trái và bên 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) thì không. Bạn có thể giải quyết vấn đề này bằng cách:

Xóa vị trí tương đối trên div.datagrid table tbodyCSS
Thay đổi div.datagrid table tbodythành div.datagrid tabletrong CSS
Loại bỏ background-colorbật table.data td.priceCelltrong CSS
Loại bỏ border-collapsebật div.datagrid tabletrong CSS

Đây là một 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 băn khoăn là:

Đây có phải là một lỗi trong Firefox?
Đây có phải là một lỗi trong IE?

Và đặc biệt: lý do gì khiến Firefox không hiển thị đường viền khi CSS như vậy?

Question 2

Đối với tôi, điều này giống như một lỗi của Firefox. Các nền được vẽ trên các đường biên giới; bạn có thể nhìn 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

Question 3

Chỉ cần gặp phải vấn đề này và đi đến một giải pháp duy nhất của css: chỉ cần thêm background-clip: padding-boxvào tdphần tử 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

Question 4

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

Sự cố được tạo ra khi bạn có ô có vị trí tương đối bên trong bảng có đường viền thu gọn (như Boris đã chỉ ra và điền vào lỗi https://bugzilla.mozilla.org/show_bug.cgi?id=688556 )

Điều này có thể được giải quyết dễ dàng bằng cách 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 sự cố (với Firefox) và cách khắc phục tại đâ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>

Question 5

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

td {
    position: static;
}

Question 6

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

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

Tôi đã được hướng dẫn đế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 của tôi, tôi đã viết <th colspan = "9"> khi chỉ có 8 cột.

Điều đó gây ra lỗi (đường viền bên phải bị ẩn) trong

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

nhưng được hiển thị với các đường viền bên phải trong

Firefox 44.0.2
IE 11 (11.420.10586.0)
Cạnh 25.10586.0.0

Question 7

Cách tốt nhất để giải quyết vấn đề này là làm điều gì đó như thế này.

Lưu ý vị trí: thuộc tính tương đối trong các phần tử "thead" và "tbody", những thuộc tính này rất quan trọng. Thuộc tính border-thu gọn và background-clip cũng vậy. Hoạt động với màu nền trên tất cả và các hàng xen kẽ.

table {
  width: 100% !important;
  border-spacing: 0;
  border-collapse: unset !important;

  thead {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      th {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }

  tbody {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      &:last-child {
        td {
          border-bottom: 1px solid #737373!important;
        }
      }

      td {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }
}

Question 8

Thêm một giải pháp khác cho vấn đề (cũ) này: Điều này đã xảy ra với tôi hôm nay, vì tôi có một bảng hơi phức tạp với nhiều tbody. Vấn đề duy nhất thực sự là tôi có một thẻ tbody đã mở chưa được đóng. Tôi đã xóa thẻ đó và các đường viền xuất hiện lại mà không cần thay đổi bất kỳ điều gì trong CSS của mình. Để làm rõ, cấu trúc của tôi như sau:

<table>
  <thead>
    <tr><th>Col1</th><th>Col2</th></tr>
  </thead>
  <tbody>
  <tbody>
    <tr><td>Val1</td><td>Val2</td></tr>
    <tr><td>Val3</td><td>Val4</td></tr>
  </tbody>
</table>

Mở rộng đoạn mã