2011-08-31 26 views
9

Tôi đã tìm thấy sự cố khi sử dụng nội dung được định vị hoàn toàn bên trong phần tử td. Phần tử td không được công nhận là phần tử định vị sao cho nội dung đang được định vị tương ứng với body. Sự cố này chỉ có trong FireFox và bố cục được mong đợi hiển thị trong các trình duyệt khác - jsfiddle.Sự cố Firefox có hiển thị: tuyệt đối trong ô trong bảng

Làm một chút đào xung quanh dường như vấn đề liên quan đến FireFox sử dụng display:table-cell làm loại hiển thị mặc định cho ô bảng. Tôi có thể giải quyết vấn đề bằng cách thay đổi hiển thị thành block hoặc bằng cách thêm vùng chứa div để hoạt động như một vùng chứa vị trí cho nội dung.

Có lý do nào để tránh thay đổi loại hiển thị của ô thành block không? Tôi muốn sử dụng phương pháp này hơn là thêm các yếu tố bổ sung để sửa vấn đề trong một trình duyệt.

Đây không phải là vấn đề tương tự như được mô tả trong div style absolute in a table cell hoặc Why "display: table-cell" is broken when "position: absolute".

+0

+1 tôi đã có cùng một vấn đề một vài ngày trước, tôi đã buộc phải thay đổi những gì tôi đã cố gắng để làm. –

+0

@ric_bfa - Đó là một ít phiền toái hơn bất cứ điều gì khác bây giờ mà tôi biết những gì gây nên nó. Tôi nghĩ rằng thế giới đã kết thúc khi ngay cả IE7 cư xử như mong đợi và FireFox không. – detaylor

+0

cùng ở đây, IE = công việc, của người khác sẽ làm tốt hơn cho chắc chắn, nhưng trong trường hợp đó, là một bất ngờ lớn. –

Trả lời

11

Nếu bạn đặt hiển thị ô thành block, nó sẽ được gói trong một ô bảng ẩn danh. Cây hộp CSS kết quả giống như khi bạn tạo một <div> bên trong ô và đặt tất cả kiểu và thuộc tính của ô trên khối đó.

Điều này có thể phù hợp với nhiều mục đích. Nó sẽ phá vỡ nếu ô có rowpan hoặc colspan (vì chúng không có ý nghĩa gì trên khối) hoặc nếu ô có kiểu đường viền mà bạn mong đợi tham gia vào việc thu hẹp biên giới hoặc nếu bạn có hai ô như vậy cạnh nhau (bởi vì sau đó hai khối sẽ được bao bọc trong một ô đơn lẻ, không phải trong hai ô bảng riêng biệt). Có thể có những tình huống khác mà hành vi sẽ không mong muốn. Nhưng nếu bạn có đủ quyền kiểm soát các kiểu và nội dung và không làm quá nhiều kiểu dáng của ô, điều này sẽ hoạt động.

+0

Cảm ơn, câu trả lời tuyệt vời. Tôi nhận thấy rằng nếu các ô khác được bao bọc thành hai dòng thì ô có 'display: block' không mở rộng như mong đợi, điều này sẽ được giải thích bởi những gì bạn đã giải thích. – detaylor

+0

@ Boris Zbarsky: vấn đề với việc sử dụng rowpan và colspan bất kỳ sửa chữa nào cho điều đó? – krish

+0

Không phải là tôi biết, thiếu một khối thực tế bên trong tế bào của bạn và đặt phong cách 'vị trí: tương đối' vào đó. Hoặc Firefox sửa lỗi liên quan, tất nhiên. –

-2

Bạn có cố gắng đặt vị trí của TD một cách rõ ràng cho người thân không?

Điều này sẽ đặt lại vị trí. Trên thực tế, đó là hành vi chính xác những gì bạn đang nhận được, và không nên chỉ liên quan đến TD, nhưng bạn biết đấy, các trình duyệt rất thú vị.

Để biết chi tiết về lý do tại sao bạn cần phải cài đặt nó một cách rõ ràng, kiểm tra:
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

..

Cập nhật:

Câu trả lời này gợi ý cố gắng một lựa chọn. Nó được viết sớm hơn câu trả lời được chấp nhận và không bị xóa chỉ vì lý do lưu trữ và vì nó là một khả năng liên quan khác cho những người đến đây từ các công cụ tìm kiếm cho một vấn đề tương tự nhưng không giống nhau. Tôi đánh giá cao sự thông cảm của bạn.

+1

có, vị trí của 'td' được đặt rõ ràng thành' relative'. Tất cả các trình duyệt ngoại trừ FireFox định vị nội dung liên quan đến 'td', các vị trí FF liên quan đến' body'. 'position: table-cell' dường như ngăn chặn' td' khỏi bị cha mẹ offset. – detaylor

+2

Tôi có cùng một vấn đề. Tất cả các trình duyệt ngoại trừ firefox đặt "vị trí: tuyệt đối;" nội dung liên quan đến "vị trí: tương đối" gần nhất cha mẹ, nhưng nếu đối tượng có "display: table-cell;" firefox bỏ qua nó, và thiết lập nội dung tuyệt đối liên quan đến cơ thể. Làm phiền. –

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