* {Box-Sizing: Border-Box; }: Um alle Elemente zu umrahmen oder nicht zu umrahmen?

Question

Ich werde mit der Entwicklung einer neuen Website beginnen, und ich bin dabei, mich mit den verschiedenen Methoden auseinanderzusetzen, mit denen Browser die Breite und Höhe von Elementen berechnen (box model stuff). Irgendwie fiel mir ein: Was passiert, wenn ich einfach box-sizing auf alle Elemente der Website anwende?

Ich bin einer von denen, die glauben, dass box-sizing: border-box; ist einer der besten Befehle gibt es in CSS, mit all seinen Einschränkungen. Allerdings sind die gleichen Einschränkungen diejenigen, die mich fragen, ob ich box-sizing auf alle Elemente anwenden sollte:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } 

Natürlich sollte meine Webseite mit so viel Browsern wie möglich kompatibel sein und box-sizing schafft ein paar Fragen, wenn wir denke an IE7-. Manchmal ist der Zeitplan jedoch so eng, dass es gut wäre, ein paar zusätzliche Minuten zu gewinnen, ohne sich über dieses spezielle Problem Gedanken zu machen.

Wie auch immer, denken Sie, dass die Anwendung von box-sizing:border-box; auf alle Elemente eine gute Richtlinie ist, oder sollte ich das nur für die Elemente tun, die es wirklich brauchen?

Answer 1

Ich denke, es ist eine großartige Idee. In der Tat werde ich das gleiche auf meinen Webseiten machen.

Hier Paul spricht darüber in der gleichen Art und Weise mit

http://paulirish.com/2012/box-sizing-border-box-ftw/

Wir haben * wurde mit {Box-Sizing: border-box;} in einem meiner Projekte (eingesetzt in Produktion, im Durchschnitt über 1mln besucht einen Monat) bei der Arbeit für etwa ein Jahr jetzt, und es scheint gut zu halten. Das Projekt wurde in IE8 & 9 und den neuesten Versionen von Firefox und Chrome getestet und wir hatten keine Probleme. Alle jQuery (+ UI) offset Berechnungen und Animationen laufen gut, sogar in jedem Element, das wir als Inline-Block angezeigt haben. In letzter Zeit haben wir begonnen, das Projekt auf mobilen Geräten (iPhone, iPad und Android) zu testen und wir hatten keine Probleme bezüglich Box-Sizing mit irgendwelchen von ihnen noch, so scheint es zu funktionieren ganz gut.

fand ich dieses

https://github.com/Schepp/box-sizing-polyfill