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.
1 2 3 4 5 6 | <td> <div class="cell-wrap"> <span>Lorem ipsum</span> <img src="plik.png"/> </div> </td> |
Teraz wystarczy już deklaracja w naszym pliku CSS:
1 2 3 | .cell-wrap { position:relative; } |
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:
1 2 3 | td { display:block; } |
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:
1 2 3 4 | td { display:inline-table; position:relative; } |
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: css • firefox • wskazówka
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.
Dzięki za ten komentarz. ;)