Wartość szerokości CSS = szerokość wyświetlania wewnątrz?Jaki jest związek między marginesem, dopełnieniem i szerokością w różnych przeglądarkach?
lub
wartość width = szerokość CSS wyświetlacz wewnątrz + CSS margin-left + CSS margin-right?
Wartość szerokości CSS = szerokość wyświetlania wewnątrz?Jaki jest związek między marginesem, dopełnieniem i szerokością w różnych przeglądarkach?
lub
wartość width = szerokość CSS wyświetlacz wewnątrz + CSS margin-left + CSS margin-right?
Musisz zapoznać się z CSS Box Model. Wyjaśnia, w którym miejscu jest wypełnienie, margines i obramowanie oraz szerokość.
Należy jednak zauważyć, że różne przeglądarki implementują to inaczej: przede wszystkim, Internet Explorer has a box model bug (jest to niesławnie w IE6 - nie jestem świadomy, czy zostało to naprawione w IE7 lub IE8), które spowodowało osławiony "tryb dziwactwa" CSS włamać się.
Krótko mówiąc, Internet Explorer ustawił swój model pudełkowy, aby uwzględniał wyściółkę przy obliczaniu szerokości, w przeciwieństwie do oficjalnego standardu, w którym szerokość powinna stanowić jedynie treść.
To zależy nie tylko od przeglądarki i wersji, którą wybierzesz, ale także od dokumentu w dokumencie HTML. Odkrywca Internetu w "trybie dziwactwa" jest na przykład zupełnie inny niż przeglądarka internetowa z doctype XHTML 1.0 Transitional.
Jak wspomniano przez innych, regułą jest CSS box model. Działa to ogólnie jak reklamowane przez przeglądarki takie jak Opera, Firefox & Safari. Internet Explorer to wyjątek, w którym "szerokość" obejmuje marginesy, dopełnienie i granice.
Istnieje kilka świetnych narzędzi, które pokazują, w jaki sposób przeglądarka renderuje zawartość. Dla przeglądarki Firefox sprawdź numer Firebug, a dla przeglądarki Internet Explorer sprawdź numer Developer Toolbar.
Here widać animowany schemat, który "eksploduje" pudełko.
Ale naprawili to i nie musisz się tym martwić, dopóki ustawisz poprawny typ dokumentu, aby IE nie było w trybie dziwactwa. – Breton
Tak, przez IE miałem na myśli IE6. Będę edytować moją odpowiedź na to, dziękuję. :) –