Při vytváření libovolného nového designu mě vždy zarazí nějaká nová chyba
MSIE, a to i ve striktním režimu MSIE 6.0. Myslel jsem si, že je už všechny
dávno znám, ale tato parodie na prohlížeč mě vždy dokáže něčím novým (co dělá
špatně) překvapit.
Například při této definici byl následující řádek za blockquote ujetý
o 5px doprava a schovaný (a písmo bylo tudíž zcela nečitelné):
blockquote {
border-left: 5px solid #F3E6B6;
background: #F9F2DA;
padding: 5px;
margin: 10px 5px 10px 20px;
}
Řešením tedy bylo namalovat si 5px * 1px obrázek a nastavit jej jako pozadí
pro MSIE, protože margin ani padding za to nemohl, chyba MSIE je v border:
* html blockquote {
border:0 none;
background: #F9F2DA url(blockquote.png) top left repeat-y;
}
S touto úpravou MSIE zobrazuje vše jak má, jen udělá o jeden HTTP request
navíc oproti Opeře, Safari či Firefoxu.
Podobné problémy jsou i s pre, zde MSIE zjevně nerespektuje overflow:auto,
a je potřeba mu natvrdo nastavit overflow:scroll, a nejlépe ještě
šířku boxu, potom se třeba
zde nerozpadne v MSIE layout stránky:
* html pre {
overflow: scroll;
width:460px;
}
Osobně se mi pro MSIE líbí jako řešení jeho chyb právě postup s * html,
což je selektor který není nikdy splněn, ale MSIE jej přesto, díky další z
jeho chyb, pokládá za existující. Je tak možné nadefinovat si funkční CSS styly
dle norem W3C, a pro MSIE dodat jen doplňky, opravy jeho chyb.
Mimochodem, dva čtenáři mi říkali, že horní logo pod MSIE bíle bliká, nejsem
schopen to nasimulovat, ale pokud Vy ano, napište mi prosím do komentářů jak
máte MSIE 6.0 nastaven (nižší verze ignoruji). Nejprve si ale obnovte CSS, třeba pomocí Ctrl+R.