shell8 (:|) [:|]

Az IE7 CSS értelmezése

_Nec dev 3

Az MS egy idei júliusi cikke szerint az IE7 közelít a css2.1 “dobozmodell” értelmezéséhez. Lássuk ez mit jelent nekünk, illetve hogyan készüljünk rá kódilag.

Az IE7 innentől rendesen kezeli a dobozokat, azaz ha egy fix dimenziójú konténerben egy blokk nagyobb mint a konténere, nem fogja emiatt növelni a konténer méreteit - azaz viszlát IE alatt széteső oldalak. De azért csak óvatosan, ez valahol más megközelítést követel az oldalak felépítésénél, ahogy ezt pl FF alatt tapasztalhatjuk néha.

Szerencsére az MSnél ismerik a termékük okozta balszerencsés kódolási szokásokat, ígyhát készültek a srácok, lássuk hát a használható css hekkeket.

IE < IE7 verziókhoz az eddig ismert:

* html .akarmi {
}

IE7 figyelmen kívül hagyja az _ kezdetű tulajdonságokat, a korábbiak nem:

.akarmi {
min-height: 300px;
/* minimum magasság 300px, ha a tartalom nagyobb, akkor növekszik */
_height: 300px;
/* ugyanez az eredmény IE6 és társai alatt, de IE7 kihagyja, és nem vágja le a tartalmat */
}

IE < IE7 verziók kihagyják a kommenttel tört tulajdonságokat, IE7 értelmezi

.myclass {
height/**/: 300px;
}

Most tessék vigyázni, ugyanis az eddig használt trükkök is rendesen értelmezve lesznek (remélhetőleg). Tehát:

a child selector >

html > body { }

az adjacent selector +

h2 + p { }

Ha nincs más megoldás, ott a sokak által kedvelt trükk, a külön stylesheet. Személy szerint nem kedvelem ezt, mert szeretem egy sitera funkcióspecifikusan tagolni a stíluslapjaim, nem pedig böngészők alapján. A beemelése történhet sokféleképp, talán legegyszerűbb a feltételes komment használata.