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


67
10
Hồ Nghi Minh
8 năm trước

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>

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

  • Xóa vị trí tương đối trên div.datagrid table tbodyCSS
  • Thay đổi div.datagrid table tbodyđể 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 hó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 không?
  • Đây có phải là một lỗi trong IE?

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

Hữu ích 67 Yêu thích 10 Chia sẻ Viết bình luận 2
Không hữu ích

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ì định vị tương đối sẽ không ảnh hưởng đến đường viền, nhưng tôi đã thực hiện một trường hợp thử nghiệm đơn giản hóa và cả 4 trình duyệt hiển thị khác nhau! (Fx6, Op 11.50, IE8, Chrome 15) Trường hợp thử nghiệm tại đây: jsfiddle.net/76Qb7/9

Hữu ích 1 · Không hữu ích · Trả lời 0

Đừng hỏi tôi tại sao, nhưng khi tôi di chuyển border-collapsetài sản từ div.datagrid tablevào table.datachính nó trong CSS ở trên, nó làm việc ổn. Có lẽ có ai đó ở đây có thể giải thích ... (tôi đang ở trên Firefox 5)

Hữu ích 0 · Không hữu ích · Trả lời 0

5 Trả lời


57
Bùi Thu Oanh
8 năm trước

Điều này trông giống như một lỗi Firefox đối với tôi. Các hình nền được vẽ trên 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 đã gửi https://ormszilla.mozilla.org/show_orms.cgi?id=688556

Hữu ích 57 Trả lời hay nhất Chia sẻ Viết bình luận 4
Không hữu ích

Kudos để nộp lỗi.

Hữu ích 4 · Không hữu ích · Trả lời 0

Tôi chạy trong cùng một vấn đề. Nó vẫn chưa được sửa bởi Firefox. Có vẻ như họ không thực sự nghiêm túc trong khi đó là một vấn đề thiết kế lớn khi sử dụng bộ chọn: nth-child (lẻ) để thêm nền cho chỉ các hàng lẻ. Tôi cần đường viền cũng để làm cho nó hoàn hảo. Thansk đã nộp lỗi!

Hữu ích 2 · Không hữu ích · Trả lời 0
Hữu ích 0 · Không hữu ích · Trả lời 0

Thật ra, không. Không phải ...

Hữu ích 0 · Không hữu ích · Trả lời 0

148
Đỗ Tiến Hiệp
6 năm trước

Chỉ cần chạy vào vấn đề này và đi đến một giải pháp duy nhất 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

Hữu ích 148 Chia sẻ Viết bình luận 4
Không hữu ích

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

Hữu ích 17 · Không hữu ích · Trả lời 0

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

Hữu ích 2 · Không hữu ích · Trả lời 0

Giải pháp CSS tốt nhất tôi đã tìm thấy. Cảm ơn bạn đã chia sẻ @mediênthings

Hữu ích 2 · Không hữu ích · Trả lời 0

Điều này làm việc cho tôi: D

Hữu ích 1 · Không hữu ích · Trả lời 0

12
Đỗ Kim Hoa
6 năm trước

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

Vấn đề được tạo ra khi bạn có một ô có vị trí tương đối bên trong một bảng có viền bị sập (như Boris đã chỉ ra và điền vào lỗi https://ormszilla.mozilla.org/show_orms.cgi?id=688556 )

Điều này có thể được giải quyết dễ dàng bằng CSS như được chỉ định bởi user2342963 (Thêm phông nền-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>
Hữu ích 12 Chia sẻ Viết bình luận 1
Không hữu ích

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

Hữu ích 0 · Không hữu ích · Trả lời 0

8
Phạm Trung Hải
6 năm trước

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

td {
    position: static;
}    
Hữu ích 8 Chia sẻ Viết bình luận 2
Không hữu ích

Nếu bạn sử dụng các yếu tố giả giống như ::beforehoặc ::aftertrên cùng td, position: staticlàm rối tung các kiểu dáng này. background-clip: padding-boxan toàn hơn

Hữu ích 1 · Không hữu ích · Trả lời 0

Hoàn hảo ! Nó hoạt động rất tốt.

Hữu ích 0 · Không hữu ích · Trả lời 0

2
Đặng Duy Tâm
3 năm trước

Một giải pháp khả thi khác là sửa các 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 các đường viền ẩn khi sử dụng thu gọn viền: sập;

Tôi đã được chuyể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-bnings.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 (ẩn đường viền phải) trong

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

nhưng được kết xuất với đường viền bên phải trong

  • Firefox 44.0.2
  • IE 11 (11.420.10586.0)
  • Cạnh 25.10586.0.0
Hữu ích 2 Chia sẻ Viết bình luận 1
Không hữu ích

Loại bỏ sụp đổ biên giới: sụp đổ từ yếu tố bảng đã giúp chúng tôi

Hữu ích 1 · Không hữu ích · Trả lời 0

Trả lời của bạn

Xem trước nội dung