W czasie pracy nad jednym z serwisów pojawił się dość ciekawy błąd IE.
Mianowicie dla kodu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <style type="text/css"> html,body,ul,ol,li{margin:0;padding:0} ul{list-style-type:none} a{text-decoration:none} #menumain{width:185px} #menumain ul{background-color:#455} #menumain a,#menumain .first li a{color:#fff} #menumain a,#menumain .first li a{display:block} #menumain a,#menumain .first li a{border-top:1px solid #fff} #menumain a,#menumain .first li a{padding:4px} #menumain ul ul{background-color:#678} #menumain ul ul .on{background-color:#f13} #menumain .on ul a{padding-left:17px} </style> </head> <body> <div id="menumain"> <ul> <li class="on first"><a href="#">Wybory samorządowe</a> <ul> <li class="on"><a href="#">Geografia</a></li> <li><a href="#">Komitety</a></li> </ul> <li><a href="#">Dokumenty wyborcze</a></li> <li><a href="#">Akty prawne</a></li> <li><a href="#">Mapa serwisu</a></li> </ul> </div> </body> </html>
Mozecie sobie pobrać spakowane źródło tego przypadku.
W dość nieoczekiwany sposób, IE zaczął kolorwać następne LI kolorem tła nadrzędnego UL.
wygląd w ie
W firefox’ie oczywiście wszystko ok:
wygląd w ff
Generalnie okazało się, że to nadrzędne li po prostu „spada” niżej. Co oczywiście nie powinno mieć miejsc.
Rozwiązanie
nadać dokładne reguły koloryzujące LI
nadać dokładną długość elementu LI
Comentarios