Sự cố định vị trong Firefox? vị trí: tương đối cho hiển thị: phần tử bảng

Question

Tôi đang gặp sự cố định vị kỳ lạ chỉ xuất hiện trong firefox.

HTML của tôi:

<article id="one" class="layer"></article> 
<article id="two" class="layer"></article> 
<article id="three" class="layer"> 
    <div class="left"></div> 
    <div class="right"></div> 
</article> 

CSS của tôi:

html, body { 
    margin: 0; padding: 0; 
    height: 100%; 
    width: 100%; 
} 

article.layer { 
    position: relative; 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

article .left, article .right { 
    position:absolute; 
    width: 50%; 
    height: 100%; 
    min-height:100%; 
    display:table; 
} 

article .left { left: 0; top: 0; } 
article .right { left: 50%; top: 0; } 

Vì vậy, mỗi bài viết được thiết lập để display:table và 100% chiều rộng và chiều cao 100%. Phần thân và html cũng rộng 100% và cao. Vì vậy, mỗi bài viết chính xác là kích thước của trình duyệt hiện tại.

Lưu ý rằng mỗi article.layer được đặt thành position:relative.

Bài viết mới nhất có hai div s ở vị trí absolute vì vậy một vị trí được đặt ở bên trái và một ở bên phải.

Tính năng này hoạt động tốt trong tất cả các trình duyệt, ngoại trừ trong Firefox. Trong Firefox các div.left và div.right của bài viết cuối cùng được hiển thị trên đầu trang và che phủ các bài viết đầu tiên ...

Đây là một bản demo trực tiếp: http://jsbin.com/ubulot/edit#preview thử nghiệm nó trong Firefox và bạn gặp sự cố. Tôi đã cài đặt FF 9.0.1 trên máy Mac của mình.

Bất kỳ ý tưởng nào tôi đang làm sai ở đây?

Answer 1

Nếu bạn thay đổi display:table thành display:block trong suốt, nó sẽ hiển thị tốt như bạn có thể thấy here. Có lý do nào bạn đang sử dụng display:table không?

Answer 2

Tôi đang sử dụng màn hình: tự bảng. Đó là một công việc xung quanh cho một số vấn đề bố trí hiển thị: khối không đủ để đối phó với. Lý do là dài dòng và tôi không đi sâu vào đây.

Đây là hậu quả của đặc điểm kỹ thuật 4/5 HTML hiện tại không xác định các hành vi nhất định liên quan đến "display: table {-x};" và định vị.

Từ cuốn sách "Mọi điều bạn biết về CSS Is Wrong" THEO Rachel Andrew & Kevin Yank:

Một thực tế phổ biến khi giao dịch với vị trí trong một yếu tố ngăn chặn là tạo ra một bối cảnh vị trí mới bằng cách thiết lập vị trí thuộc tính của phần tử khối tương đối. Điều này cho phép chúng tôi định vị các phần tử trong khối, so với phần tử trên cùng, bên phải, dưới cùng hoặc bên trái. Tuy nhiên, khi thiết lập vị trí: tương đối; trên một phần tử mà cũng có giá trị hiển thị liên quan đến bảng được chỉ định, vị trí bị bỏ qua. Hành vi này trước đây đã được ghi nhận bởi Alastair Campbell, người chỉ ra trong bài viết của mình rằng CSS 2.1 spec là không rõ ràng về những gì các trình duyệt nên làm khi một phần tử hiển thị như một yếu tố bảng được tương đối vị trí:

Tác động của position: relative trên bàn hàng nhóm, bảng-header-nhóm, Bảng- footer-group, table-row, table-columngroup, bảng-cột, ô bảng và chú thích bảng không xác định.

Hành vi này là, theo ý kiến ​​của tôi, vấn đề lớn nhất với việc sử dụng bảng CSS cho bố trí ...

Rõ ràng Mozilla chỉ đơn giản là bỏ qua bất kỳ nỗ lực xây dựng một bối cảnh vị trí sử dụng các yếu tố bảng CSS.

Các tài liệu tham khảo cùng tiếp tục với hai gợi ý:

Không có cách tiếp cận đơn giản để sửa chữa vấn đề này bằng bảng CSS, nhưng chúng ta có thể lấy một trong hai phương pháp đơn giản để cung cấp một bối cảnh vị: thêm một khối con vị trí phần tử vào ô hoặc bọc bảng trong phần tử được định vị.

Không có giải pháp thanh lịch nào cho tiện ích này. Nó yêu cầu đánh giá từng trường hợp về vấn đề và giải pháp thay thế phù hợp. :(

Trong trường hợp của bạn, bạn cũng có thể rời khỏi. "Position: relative" ra khỏi lớp "Layer" của bạn Đó là vô nghĩa với Firefox

Vì bạn đã tạo lớp "Layer" như một. bảng, đơn giản làm cho mỗi người trong số các s trong trường hợp cuối cùng "display: table-cell;".

nên CSS của bạn có thể được thực hiện như sau:

.Layer:last-of-type > div 
{ 
display: table-cell; 
/* Other formatting here. */ 
}