deadlime

Az új dizájn átpakolása során találkoztam egy érdekes problémával. Talán mondanom sem kell, hogy ez az érdekes probléma Internet Explorer alatt jelentkezett, és először fogalmam sem volt arról, hogy mi a fene baja lehet az oldalnak. A hibás részt először sikerült leszűkítenem egy bejegyzésre, aztán azon belül is az egyik bekezdésre, ami végig dőlt betűvel volt írva. Elég egyszerűen reprodukálható dologról van szó, ezért nézzük is rögtön a hozzá tartozó példakódot:

<div class="valami">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div class="valami">Lorem ipsum <em>dolor sit amet</em>, consectetuer adipiscing elit.</div>

Mint az látható, nem is kell feltétlen az egész bekezdésnek dőltnek lennie, elég ha egy sor vége és a következő sor eleje az.

.valami {
    width: 150px;
    background: #DDD;
    color: #777;
    text-align: justify;
    margin: 2px 0;
}

A másik fontos dolog a text-align: justify; sor, szimpla balra vagy jobbra igazítás mellett semmi gond nincs a dőlt betűkkel. Itt pedig egy kép is látható, hogy ennek a dolognak hogy kellene kinéznie (van egy 10px-es padding is, amit a kódból kihagytam, mert nem befolyásolja a dolog működését).
Természetesen az IE máshogy értelmezi a világot, és valami úton módon a második bekezdés 4px-el szélesebbre sikerül neki, mint ami elfogadható lenne.

Megoldás? Szerencsére az is akad, akár több is. Választhatjuk azt, hogy az IE számára másfajta szabályokat adunk az <i> és az <em> tageknek, hogy ne legyenek dőltek. Csinálhatjuk azt, hogy a sorkizárt bekezdések IE-ben balra legyenek igazítva. Ha viszont minden áron dőlt betűstílust akarunk használni sorkizárt bekezdésben, akkor ez a kis kibővítés megoldja a problémánkat, amire itt leltem rá:

.valami {
    width: 150px;
    background: #DDD;
    color: #777;
    text-align: justify;
    margin: 2px 0;
    
    overflow: visible;
    height: 1em;
}

Természetesen a normális böngészők nem szeretik látni ezt a két sort, tehát úgy használjuk, hogy ők ne lássák, vagy számukra felül legyen definiálva (IE feltételes megjegyzések, !important, stb.). Remélem sikerült megspórolnom az érintettek számára pár percnyi bugvadászatot.