Mam element div, dla którego chcę określić STAŁĄ szerokość i wysokość, a także wypełnienie, które można zmienić bez zmniejszania lub zwiększania oryginalnej szerokości / wysokości DIV, czy jest na to sztuczka CSS, czy alternatywa z użyciem dopełnienia?
93
Zadeklaruj to w swoim CSS i powinieneś być dobry:
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
To rozwiązanie można wdrożyć bez użycia dodatkowych opakowań.
Zmusi to przeglądarkę do obliczenia szerokości zgodnie z „zewnętrzną” szerokością elementu div, co oznacza, że wypełnienie zostanie odjęte od szerokości.
źródło
Wygląda na to, że chcesz zasymulować model pudełkowy IE6. Aby to osiągnąć, możesz użyć właściwości CSS 3 -size-size: border-box . Jest to obsługiwane przez IE8, ale w przypadku przeglądarki Firefox musisz użyć,
-moz-box-sizing
aw przypadku Safari / Chrome - użyj-webkit-box-sizing
.IE6 już źle oblicza wysokość, więc jesteś dobry w tej przeglądarce, ale nie jestem pewien co do IE7, myślę, że obliczy wysokość tak samo w trybie dziwactw.
źródło
spróbuj tej sztuczki
div{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
zmusi to przeglądarkę do obliczenia szerokości zgodnie z „zewnętrzną” szerokością elementu div, co oznacza, że wypełnienie zostanie odjęte od szerokości.
źródło
Aby uzyskać spójny wynik w różnych przeglądarkach, zwykle dodaje się kolejną
div
wewnątrzdiv
i nie podaje jawnej szerokości, amargin
.margin
Będzie symulowaćpadding
na zewnętrznym div.źródło