Oprava CSS bugu v MSIE překreslením

Microsoft Internet Explorer má mnoho odlišností a chyb při zobrazování CSS. Některé se dají vyřešit pomocí CSS hacků. Někdy se řešení nemusí týkat CSS.

Menu, seznamy kategorií a podobné výčtové prvky se v XHTML obvykle realizují jako seznamy a jejich vzhled se definuje pomocí CSS. Sémanticky správné a obvykle i funkční řešení.

vadné menu v msie 6Sravné menu v opeřePři tvorbě víceúrovňového menu s kategoriemi pro jeden eshop se v MSIE vyskytovala podivná chyba. MSIE nepravidelně nevykresloval vodorovnou mezeru mezi jednotlivými položkami a někdy nevykreslil ani levý žlutý okraj jednotlivých položek. Někdy stačilo kliknout na jinou položku a mezera se vykreslila spravně. Další klik na stejnou položku … a zase špatně.
Nepravidelně se vyskytující chyba se hledá špatně. Systemém pokus-omyl jsem zvětšoval mezery, nastavoval z-index a různě experimentoval s CSS. K úspěchu to nevedlo, navíc menu pak nevypadalo podle záměru grafika. Chyba se také projevovala i při změně velikosti okna. Nakonec jsem si přece jen všiml jedné pravidelnosti: chyba se neobjevila po stisku klávesy F5, MSIE asi po stisku F5 jen překreslí stránku. Napadlo mě, že by možná pomohlo vyvolat překreslení po načtení stránky. Doplnil jsem kousek javascriptu do externího souboru iefix.js:

function prekreslitVadneMenu() { 
    document.getElementById('vadne_menu').style.display='none'; 
    document.getElementById('vadne_menu').style.display='block'; 
} 
window.onresize=prekreslitVadneMenu; window.onload=prekreslitVadneMenu;

Menu samozřejmě muselo dostat identifikátor <ul id=“vadne_menu“>. Protože nemělo smysl s tímto patchem obtěžovat návstěvníky s jiným prohlížečem než MSIE, vložil jsem ho do stránky pomocí podmíněného komentáře:

<!--[if IE]><script src="iefix.js" type="text/javascript"></script><![endif]-->

Menu sice při změně velikosti okna v MSIE poskočilo, ale doskočilo na správné místo.

Celý problém vznikl kvůli požadavku zadavatele na třísloupcový layout s plovoucí šířkou prosředního sloupce. Když k tomu přibude potřeba mít hlavní obsah stránky na začátku dokumentu, je to docela oříšek. Řešení jsem našel na serveru A List Apart v článku In Search of the Holy Grail, jeho součástí je také CSS hack s opravou pozicování levého sloupce v MSIE. Naneštěstí právě v tomto sloupci jsem měl ono vadné menu. Další problém se projevil při zúžení okna: kvůli neschopnosti MSIE nastavit na prostřední sloupec min-width se levý sloupec překresloval přes prostřední (můžete vyzkoušet tento příklad v MSIE). Pomocí podmíněného komentáře jsem doplnil další soubor iefix.css s výpočtem šířky pomocí expression.

Proč popisuji tyto problémy a jejich řešení v minulém čase? Poté, co jsem přinutil MSIE k jakžtakž správnému zobrazení stránky, se zadavatel rozhodl že to v MSIE pořád není ono a změnil požadavek na stránky s pevnou šířku sloupce. Tím pádem problém zmizel a práce s optimalizací pro MSIE byla zbytečná. Příště asi raději přímo řeknu že to v MSIE nefunguje, protože snaha přinutit MSIE aby se choval jako moderní prohlížeče je často marná.

Rubriky : Tvorba webů

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>