Problemy z pozycjonowaniem w Firefoksie? position: relative dla wyświetlacza: element tabeli

Question

Mam najdziwniejszy problem z pozycjonowaniem, który pojawia się tylko w firefoxie.

Moje HTML:

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

Moje CSS:

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

Więc każdy artykuł jest ustawiony na display:table i szerokość 100% i 100% wysokości. Ciało i html są również w 100% szerokie i wysokie. Dlatego każdy artykuł ma dokładnie rozmiar aktualnego Browserwindow.

Należy zauważyć, że każdy article.layer jest ustawiony na position:relative.

W najnowszym artykule znajdują się dwa div s w pozycji absolute, więc jeden znajduje się po lewej, a drugi po prawej.

Działa to dobrze we wszystkich przeglądarkach, z wyjątkiem Firefoksa. Firefox div.left i div.right ostatniego artykułu są wyświetlane na górze i nakładki pierwszy artykuł ...

Oto demo na żywo: http://jsbin.com/ubulot/edit#preview przetestować go w Firefoksie i widzisz problem. Mam zainstalowany FF 9.0.1 na moim Macu.

Każdy pomysł, co robię źle tutaj?

Answer 1

Jeśli zmienisz display:table na display:block w całym, stanie się to dobrze, jak widać here. Czy istnieje powód, dla którego używasz display:table?

Answer 2

Używam wyświetlacza: sam stół. Jest to obejście pewnych problemów z układem, które wyświetlają: blok nie radzi sobie w wystarczającym stopniu. Przesłanka jest długa i nie zamierzam tutaj wchodzić.

Jest to konsekwencja obecnej specyfikacji HTML 4/5, która nie definiuje określonych zachowań w odniesieniu do "display: table {-x};" i pozycjonowanie.

Z książki „Wszystko wiedzieć o CSS Is Wrong” Rachel Andrew & Kevin Yank:

Powszechną praktyką w kontaktach z pozycjonowaniem w elemencie blokowym jest stworzenie nowego kontekstu pozycjonowania poprzez ustawienie właściwość position elementu blokowego względem względnego. Dzięki temu możemy umieścić w bloku elementy w stosunku do jego górnej, prawej, dolnej lub lewej. Jednak przy ustawianiu pozycji: względna; na elemencie, który ma również określoną wartość wyświetlania związaną z tabelą, ignorowane jest pozycjonowanie . To zachowanie zostało wcześniej udokumentowane przez Alastaira Campbell, który wskazuje w swoim artykule na CSS 2.1 Spec nie jest jasne, co należy zrobić, gdy przeglądarek element wyświetlając jako element tabeli jest stosunkowo umieszczone:

Skutek position: relative na table-row-group, table-header-group, RTV- footer-group, table-row, table-columngroup, table-column, table-cell i table-captionelements są niezdefiniowane.

Takie zachowanie jest, moim zdaniem, największym problemem przy użyciu tabel dla układu CSS ...

Widocznie Mozilla po prostu ignoruje wszelkie próby nawiązania kontekst pozycjonowania z wykorzystaniem elementów tabeli CSS.

To samo referencyjna nadal z dwóch propozycji:

Nie ma proste podejście do rozwiązywania tego problemu przy użyciu tabel CSS, ale możemy przyjąć jedną z dwóch prostych metod, aby zapewnić kontekst pozycjonowania: dodać umieszczony blok dziecko element do komórki lub zawijaj tabelę w pozycjonowanym elemencie.

Nie ma eleganckiego rozwiązania tego. Wymaga indywidualnej oceny problemu i dostosowanego rozwiązania. :(

W twoim przypadku może równie dobrze zostawić off. „Position: relative” z klasy „warstwa” To bez znaczenia dla Firefoksa

Ponieważ stworzyliśmy klasę „warstwa” jako. stół, prosty uczynić S w ostatniej instancji "display: table-cell,".

więc CSS można zrobić tak:

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