Wskazówka: Pozycjonowanie absolutne wewnątrz komórki tabeli – problem w Firefox


12 maja 2014 / Mr.Mr


Dzisiaj przedstawimy Wam szybkie rozwiązanie specyficznego problemu występującego w przeglądarce Firefox. Problem dotyczy pozycjonowania absolutnego elementu wewnątrz komórki tabelki. Jeśli chcielibyśie nadać komórce tabeli position:relative i w ten sposób ograniczyć przestrzeń pozycjonowanie elementu dziecka z position:absolute to niestety w przeglądarce ze stajni Mozilla spotka was pewne zaskoczenie.

Otóż nie da się… Firefox nie ogranicza pozycjonowania do komórki z position:relative, a więc cała sztuczka z ograniczeniem przestrzeni pozycjonowania elementu absolutnie pozycjonowanego nie działa.

Szybkim rozwiązaniem tego problemu jest użycie dodatkowego div’a, który owija całą treść komórki i staje się w ten sposób przodkiem elementów pozycjonowanych.

Teraz wystarczy już deklaracja w naszym pliku CSS:

Wszystkie elementy pozycjonowane absolutnie będą pozycjonowanie względem swojego przodka o klasie cell-wrap.

Innym sposobem na pozbycie się tego problemu z liska jest nadanie komórce tabeli wyświetlanie blokowe:

Ale niesety to rozwiązanie spowoduje, że tabelka przestanie wyświetlać się poprawnie.

Update:

Jest jednak ratunek. Jeśli nadamy komórce następującą deklarację to wszystko będzie jak należy:

Chyba wystarczy zmienić domyślne wyświetlanie tak aby ograniczenie position:relative działało. Problem z głowy ;)

Image courtesy of Idea go / FreeDigitalPhotos.net


Tagi:


2 odpowiedzi na “Wskazówka: Pozycjonowanie absolutne wewnątrz komórki tabeli – problem w Firefox”

  1. Comandeer pisze:

    To dziwne, ale ustawienie display:block dla td nie powinno robić liskowi żadnej różnicy tak naprawdę. Zgodnie ze specyfikacją CSS 2.1, elementy tabeli z nadanym pozycjonowaniem winny być interpretowane właśnie jako elementy blokowe: http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
    AFAIR to nie do końca jest bug, tylko działanie zgodne z pewnymi wytycznymi ze specyfikacji, które jedynie lisek przestrzega. Cóż, czasami spójność międzyprzeglądarkowa jest ważniejsza od jakiegoś standardu.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *