Przyznaję się. Nigdy nie zrozumiałem do końca działania height.
Czy ktoś potrafi powiedzieć jak powinna zachować się przeglądarka na teście: http://zajec.net/bug/0.01height
Ja nigdy do końca nie rozumiałem procentów.
Teoretycznie powinna to być dziesiąta część promila od wysokości elementu nadrzędnego. W tym wypadku jest to chyba body. Jeśli nie ma elementów, które wymusząją jego rozrost, body ma wysokość 0. Nie wiem jednak, czy taki div jakoś wymusza, czy też nie wymusza owej wysokości.
Opera zachowała się w sumie poprawnie, bo dziesiąta część promila wysokości to w sumie 0, niezależne czy do body będzie miało wysokość 0, czy będzie powiększone o wspomniany div.
Kilka innych przeglądarek, jakie sprawdziłem, też zachowały się poprawnie. Nie wiedziały, ile to jest owe 0.01% od elementu, którego wysokość jest zależna właśnie od wysokości tego diva, którego wysokość właśnie ustalają. Rekurencja. Zgodnie ze specyfikacją więc zignorowały ową właściwość i wyświetliły domyślną wysokość.
Trzeba zrobić trochę więcej testów w tej materii, aby określić, czy gdzieś nie ma przypadkiem buga. Potrzeba trochę elementów do rozciągania body.
Zrobiłem kilka dodatkowych testów. Jeśli tego twojego diva wrzucić do innego diva, który ma określoną wysokosć w px, zachowuje się zgodnie z założeniami.
pytanie, po co takie coś stosować?
mi to wygląda na kolejny "dirty ie hack" ;-)
Jak to po co? A po co jest np. 1.2 em? Żeby mieć więcej "swobody". 1% z 500 pikseli to aż 5px A jak ktoś chciałby procentowo określić tak żeby było np. 3px?
Osobiście nie widzę powodu, aby stosować tak małe liczby procentów.
Przy okazji. Co jest ciekawego w tejliczbie?
0.994999974966%
Takie coś zastosowało Google w serwisie Picasa i w Operze (w przeciwieństwie do Gecko) nie wyświetla się część serwisu.
To jest hack dla IE6, który powinien znaleźć się w komentarzu warunkowym, a nie jako globalna definicja. IE6 ma straszne problemy z prawidłowym interpretowaniem właściwości „overflow”, która jest wykorzystywana przy stylowaniu elementów zawierających wewnątrz elementy zawijane przez „float”. IE6 traktuje „height” w rzeczywistości mniej więcej jak „min-height” interpretowany przez normalne przeglądarki. Dlatego wykorzystuje się ten bug w IE do poprawiania zepsutej implementacji właściwości „overflow”.
Równie dobrze można by zapisać: „height: 1;”, „height: 1px;” czy „height: 1%;”, aby uzyskać poprawne wyświetlanie w IE, ale taka reguła powinna znaleźć się w komentarzu warunkowym, ewentualnie można by ją poprzedzić znakiem pokreślenia („_height” – kolejny błąd, tym razem dotyczący parsowania CSS w IE; sztuczka nazywa się „underscore hack”).
IMO Gecko robi błąd, ale pewnie dlatego, że próbuje eliminować przypadki nieumiejętnego zastosowania takiego hacka (czyli tak jak na Google Picasa). Zachowanie Opery wydaje mi się poprawne. Wysokość to nie minimalna wysokość. Poza tym jeszcze w Firefoksie 2 (nie jestem pewien, czy w Fx3 jest dalej tak samo), DOCTYPE z XHTML 1.0 Transitional powodował włączenie w Firefoksie trybu „prawie standardowego” (albo o podobnej nazwie, nie pamiętam dokładnie), który zapewniał renderowanie w trybie standardów, ale tryb ten odpowiadał „standard mode” z IE. Pewnie dlatego wygląda to identycznie pod IE i Firefoksem (czy pod Gecko ogólnie).