CSS atribút display: inline-block a Mozilla Firefox

Pridať komentár

CSS atribút display: inline-block a Mozilla Firefox

CSS atribút display: inline-block je používaný na pridanie blokových vlastností pôvodne inline elementu, ale zároveň zachováva zobrazenie tohto elementu v riadku. Znie to asi trochu zložito, preto radšej uvediem príklad.

HTML tag <a> je štandardne inline – riadkový element, ktorý sa bezproblémov zobrazuje v toku textu. Pokiaľ však chceme vytvoriť napríklad tlačítko, tak väčšinou použijeme <a> tag a nastavíme mu v CSS nejaké vlastnosti.

a { display: block; width: 88px; height: 31px; background-image:url('cesta/k/obrazku.gif') }

Takto sme vytvorili z <a> tagu tlačítko o rozmeroch 88×31 px a s nejakým definovaným pozadím. Aby všetko fungovalo, musíme z pôvododne riadkového elementu vytvoriť blokový element a to použitím atribútu display: block. Ten však spôsobí okrem iného aj to, že takto formátovaný <a> tag bude vyňatý z toku textu. Aby sme mohli z <a> tagu vytvoriť tlačítko a zároveň zachovať aj jeho inline vlastnosti, musíme miesto display: block nastaviť display: inline-block.
Ten zabezpečí všetko čo potrebujeme. Všetko funguje tak ako má, okrem Firefoxu, ktorý tento atribút ignoruje. Riešenie ako obyčajne existuje a ako obyčajne je v podobe nevalídneho zápisu:

a {
  display: inline-block;
  display: -moz-inline-stack; // toto je kľúč...
  width: 88px;
  height: 31px;
  background-image:url('cesta/k/obrazku.gif')
}

Firefox prvý zápis atribútu display ignoruje, lebo ho nepozná. Prejde preto na druhý zápis, ktorý je špecifický pre Mozilly – -moz-inline-stack. Ten pracuje vo Firefoxe rovnako ako inline-block v iných prehliadačoch. -moz-inline-stack bude v ostatných prehliadačoch ignorovaný.