HTML5 & CSS3

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

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.

<td>
 <div class="cell-wrap">
  <span>Lorem ipsum</span>
  <img src="plik.png"/>
 </div>
</td>

Teraz wystarczy już deklaracja w naszym pliku CSS:

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

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:

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:cssfirefoxwskazówka

komentarze 2

  • Awatar
    Comandeer

    12 maja 2014 23:04

    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.

    Odpowiedz
    • Awatar
      Mr.Mr

      13 maja 2014 08:03

      Dzięki za ten komentarz. ;)

      Odpowiedz

Zostaw odpowiedź