Share
Der CSS-Standard legt fest, dass Ränder und Auffüllung oberhalb der angegebenen Breite eines Elements angewendet werden sollen. Wenn ich also ein Div von 200px habe und die Umrandungen und Polsterungen im Wert von 40px anwenden, wird die Breite dann 240px betragen. Das macht absolut Sinn. Allerdings hat der Internet Explorer die Dinge anders gemacht. Sie haben ein Modell übernommen, bei dem die von Ihnen angegebene maximale Breite angegeben ist. Die Ränder und die Auffüllung werden dann in diese Breite eingepasst, wodurch der Inhaltsbereich reduziert wird. Daher überschreitet die Breite des Elements niemals die angegebene Breite von 200px.
Da wir meistens mit extrem sensiblen Float-Layouts arbeiten, bei denen sogar das Hinzufügen eines 1px-Rahmens das Design durchbrechen kann, frage ich mich: Hat der Internet Explorer es richtig gemacht??
„Die CSS-Eigenschaft für die Boxgröße wird verwendet, um das Standard-CSS-Boxmodell zu ändern, das zur Berechnung der Breite und Höhe von Elementen verwendet wird. Mit dieser Eigenschaft können Sie das Verhalten von Browsern simulieren, die die CSS-Modellspezifikation nicht korrekt unterstützen. “
Wenn Sie also entscheiden, dass Sie die ursprüngliche Interpretation des Box-Modells von Internet Explorer nachahmen möchten, können Sie dies tun. Der Standardwert für die Größenanpassung von Boxen ist "content-box". Dies bedeutet einfach, dass Breite und Höhe eines Elements die Ränder und die Auffüllung (oder die Ränder) nicht enthalten..
Durch Ändern dieses Werts in „Rahmen“ werden die Werte für Breite und Höhe dann geändert umfassen die Grenzen und Polsterung.
#box width: 200px; Höhe: 200px; Hintergrund: rot; Polsterung: 10px; Rand: 10px durchgehend schwarz; -moz-box-dimensionierung: border-box; -webkit-box-dimensionierung: border-box; Box-Dimensionierung: Border-Box;
Weil wir es erklärt haben Box-Sizing Bei einem Wert von "border-box" beträgt die endgültige Breite des Elements "#box" (oben) 200px.
Dies kann insbesondere bei Float-Layouts eine Menge Kopfschmerzen ersparen! Aber damit bin ich noch unentschieden. Wie denken Sie über die Interpretation des Box-Modells durch Internet Explorer??
Accentsconagua