Képes inline gombok létrehozása sprite-tal CSS-ből

Gondoltam megosztom veletek, hogyan is szenvedtem végig, mire végre minden böngészőben ugyanúgy nézett ki.

Adott ez a HTML kód:

<a href="#">gomb</a>

CSS:

a {
    display: inline-block;

Sprite pozicionalasa a gombunknak.
    background: url(mysprite.gif) no-repeat 0 0;

A majdan kilogo szoveg elrejtese
    overflow: hidden;

A gomb mereteinek megadasa
    width: 16px;
    height: 16px;

Kitoljuk a szoveget a gombon kivulre
    text-indent: 16px !important;

Az elozo sorban levo !important azert kellett, hogy a "modern" bongeszok figyelmen kivul hagyjak a kovetkezo sort!
Internet Explorer 6 es 7 alatt is ha text-indent-et adunk egy inline-block elemnek, akkor azt margokent alkalmazza azt.
    text-indent: 0;

Firefox 2 nem ismerte meg az inline-block tipust.
    display: -moz-inline-box;

Firefox 3 alatt az 1px-es font meretet nem jelenitette meg, ha be volt kapcsolva, hogy minimum mekkora legyen a megjelenitheto betumeret. Emiatt megjelenhetett egy 1px magas "csik", ami a szoveg volt. Ez a betumeret eleg ahhoz, hogy a szoveg kicsusszon a kerning miatt.
    font-size: 100px;

Internet Explorer figyelmen kivul hagyja a height+overflow tulajdonsagokat, ha nagyobb a font meret a height-nel, es szethuzza a font meret megjelenitesehez szukseges meretre az elemet.
    line-height: 1px;

Amennyiben ez nincs megadva, Internet Explorer alatt osszevissza jelennek meg az elemek.
    vertical-align: top;

A tobb szavas szovegek becsuszhattak a megjelenitesbe Firefox 3 alatt.
    white-space: nowrap;
}