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 e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *