Kajak, zasada jest taka:
1. Opera, FireFox, Safari dla obiektu który ma 100px szerokości
(width), 25px obramowania
(border) i 20px marginesu wewnętrznego
(padding):
100+
2*25+2*20=
100+
50+40=
190px;
2. Dla Internet Explorer 5,5 oraz 6
(nie pamiętam ale chyba 7,8 już nie robiły problemu):
100+
2*25+2*20=
100+
50+40=
100px; (Ot Microsoft szuka zdolnych informatyków ale chyba nie wymaga podstaw matematyki od nich)
Co oznacza że IE niestety wlicza padding oraz border do szerokości. Rozwiązanie polega na tym że o ile na IE 5,5 nie ma innego ratunku jak osobny kod CSS lub warunki o tyle z IE 6 jest ratunek. Wystarczy umieścić odpowiedni DOCTYPE i NIC PRZED NIM. Wtedy IE będzie pracować wg standardów (przynajmniej w większości) i wszystko będzie ok. Brak DOCTYPE sprawia że IE przestawia się na tryb wstecznej zgodności
(ot litość dla starych stron WWW pisanych pod zabugowany IE) co sprawia że box model bug i kilka innych ląduje na Twojej głowie.
Także rozwiązanie polega na tym by umieścić odpowiedni DOCTYPE i ustawić padding i border tak jak Ci pasuje i odpowiednio przy tym zmniejszyć szerokość elementów. Co do IE 5,5 to szkoda zabawy, nie wiem nawet czy ktoś to jeszcze ma. Osobiście uważam że za wspieranie tego starocia powinno brać się dodatkową opłate.
Ogólnie jeżeli piszesz ze standardem Strict, doctype jak i znacznik początkowy <html> powinny wyglądać tak:
Kod: Zaznacz cały
<!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" lang="pl">
Jednak wymogi są wymogami i na początku trzeba jeszcze umieścić ten oto kod:
Kod: Zaznacz cały
<?xml version="1.0" encoding="iso-8859-2"?>
Czyli całość będzie się prezentować w ten sposób:
Kod: Zaznacz cały
<?xml version="1.0" encoding="iso-8859-2"?>
<!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" lang="pl">
Teraz niespodzianka, mając tą linijke przed DOCTYPE, IE 6 dalej wróci do trybu wstecznej zgodności i dalej masz problem. Rozwiązania są dwa. Pierwsze to takie żeby przed DOCTYPE nie wstawiać tej linijki. Validator się nie pluje a szczerze powiedziawszy, nic Ci to nie zmieni.
Drugi sposób dla tych którzy uważają że wszelkie odstępstwa od regulaminu są karygodne, mam inne rozwiązanie. Wsadzić po prostu pierwszą linijke w warunek przez co całość będzie wyglądać tak:
Kod: Zaznacz cały
<!--[if !IE 6]><?xml version="1.0" encoding="iso-8859-2"?><![endif]-->
<!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" lang="pl">
Szczerze, nie testowałem, ot pomysł który mi teraz do głowy przyszedł ale powinno w teorii zadziałac, może ktoś sprawdzi :] W każdym razie krzywda się nie stanie jak pominiecie tą linijke przed DOCTYPE.
