Dnes je ke stažení RC1 verze Internet Exploreru 8. Dle Microsoftu by měla již následovat ostrá verze. RC1 by měla již mít uzavřené nové vlastnosti. Otázkou je, zda Microsoft alespoň opraví chyby. Stahovat můžete z odkazů uveřejněných na Živě.cz, co je nového se dozvíte v release notes. Pojďme se podívat na palčivé problémy jádra IE8.

...

Práce s vektory

Zvyknout si na chyby, nebo na jiné chování u kodérů a JS programátorů je otázkou jejich duševního zdraví, ale pokud něco přestane fungovat, pak je to problém. Microsoft ve všech betách a i v RC1 jednoduše vypnul VML a nezavedl náhrad. Dle rozhovoru s vývojáři se na SVG můžeme těšit v nové verzi, to je ale slabá útěcha. Pokud chceme používat VML, musíme vždy přepnout IE8 do kompatibilního režimu s IE7 pomocí meta tagu popsaného v minulém postu: Druhá beta Internet Exploreru 8 podrobně.

Render bug max-height a max-width

S novým renderovacím jádrem přicházejí nové chyby. Bohužel chyby, které v IE7 nebyly. V IE7 byla zavedena podpora pro CSS vlastnosti min/max-width/height. Pro starší IEčka fungoval trik s expression na vlastnosti height nebo width, který pomocí JS dokázal tuto vlastnost úspěšně emulovat. V IE8 módu jsou expression nefunkční, nicméně vlastnosti min/max-width/height jsou méně funkční než v IE7!

Velice často se používají tyto vlastnosti v kombinaci s vlastností overflow pro výpis zdrojových kódu. Tento kód vypisujeme do nějakého boxu, který má definovanou výšku pomocí max-height tak, aby pokud je kód moc dlouhý nenatahoval moc stránku. Dále má box nastaven overflow na hodnotu auto, aby při dlouhém kódu byla možnost ho scrolovat. Kód vypadá zhruba takto:


code {
   max-height: 200px;
   width: 300px;
   overflow: auto;
}


Problém Internet Exploreru 8 je, že pokud je vlastnost overflow nastavena na auto nebo scroll, pak považuje vlastnost max-height za height. Nicméně se výsledek liší od boxu, který má nastaveno height a to tak, že případný vodorovný scrollbar tento box ještě natahuje, takže místo výšky 200px bude výška 217px. Toto chování je správné, pokud by ale fungovala vlastnost správně, viz ostatní prohlížeče. Kupodivu, i když vnitřnímu obsahu nastavíme position na absolute, čímž ho vyjmeme z toku dokumentu, bude mít element stále svojí max. výšku. Testovací stránka s boxy ukazuje odlišnosti v renderování.

V případě vlastnosti max-width je situace trochu jiná. Vlastnost position s hodnotou absolute obsahu docíli zmenšení šířky na minimum, což je správně, nicméně pokud nastavíme overflow na hidden a overflow-y na scroll, pak vertikální posuvník zapříčíní, že IE8 přestane reflektovat nastavenou šířku a box roztáhne na šířku obsahu!

Jak z toho ven? Klasickou matrioškou, tedy obalující box má nastavenou nastavenou maximální šířku a přetékající obsah schovává, vnitřní box zobrazuje horizontální scrollbar. Problém samozřejmě nastane pokud obsah bude přetékat max. výšku rodičovského boxu:


<div id="box7" style="overflow: hidden; overflow-y: auto;">
   <pre style="display: block; overflow-x:auto; max-height:inherit;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />test</pre>
</div>


Doufejme, že v Redmondu ještě zapracují, abychom nemuseli většinu webů přepínat do kompatibilního režimu IE7.