Świetne zestawienie:
CSS Differences in Internet Explorer 6, 7 and 8
Pokazane punkt po punkcie jakie selektory działają w której z wersji przeglądarki.
Ogólna konkluzja jest taka, że wersja 6 była/jest po prostu strasznie fatalna. Bardziej nawet niż myślałem.
Sytuacja jest prosta. W pewnym miejscu serwisu przestała się pokazywać zawartość jednego z boksów. Widać było sam kontener, prawidłowo wypełniony tłem i prawidłowo rozciągnięty w pionie przez swoją zawartość.
Jedno ale. Zawartości nie widać.
Przykładowy listing:
Wszystkie divy są float’owane do lewej, wszystkie też mają ustawiony clear po lewej stronie. Całość znajduje się w jakimś divie o ustalonej szerokości, a div.a mają taką samą szerokość jak parent oraz padding:0;margin:0.
Kluczem całego błędu okazało się być to, że div#dyn ma dynamicznie generowaną zawartość. (kalendarzyk).
Zmieniająca się wysokość pierwszego div.a powodowała przesunięcie drugiego div.a, jednocześnie div.b pozostał na swoim miejscu. Jego top … się nie zmienił, mimo position:static. Po prostu pozostaje, tam gdzie stał, wyłażąc w lewo poza lewy margines rodzica.
Drugi div.a musi być ustawiony na float:none – wtedy problem nie występuje.
Wyobraźcie sobie system CMS dedykowany do obsługi naprawdę dużego ruchu, wielu redaktorów, wielopoziomowej możliwości akceptacji treści. Dobra może wystarczy. Jest sobie taki system.
Dla tych co wiedzą, jest to znany problem opisany nawet na wiki: XMLHTTP, więc jak kto zna, to nie czytać. Wpis sobie tak czy inaczej zrobię. Ku pamięci.
W przypadku jakiejś tam liczby rzeczy do wyświetlenia, np. drzewa folderów, czy dużej liczby dokumentów, warto zastosować prosty trick. Zamiast ładować całą stronę można załadować „szkielet”, a poszczególne treści dociągnąć za pomocą AJAX’a. Brzmi fajnie? I jest fajne. Same zalety, klient cieszy się że szybko coś widać, choć sumaryczny czas ładowania strony jest przecież większy, ale strona działa, można zmienić folder, przejść gdzieś po menu, a samo drzewo folderów czy też lista dokumentów z wybranego folderu może przyjść za chwilę.
Często klienci chcą „odpicować” stronę, poprzez dodanie różnych rzeczy, które „się dzieją”.
Na stronie: Usability enhancements with JavaScript w bardzo miły sposób przedstawiono parę rzeczy.
Pozwolę sobie zacytować zasady używania javascriptu:
abbr czy q.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.
Oparte na WordPress & Theme by Anders Norén