* {Dimensionamento scatola: border-box; }: A border-box o no a border-box tutti gli elementi?

Question

Inizierò a sviluppare un nuovo sito Web e mi sto preparando ad affrontare i diversi metodi utilizzati dai browser per calcolare la larghezza e l'altezza degli elementi (box model stuff). In qualche modo, mi è venuto in mente: e se applicassi lo box-sizing a tutti gli elementi del sito web?

Sono uno di quelli che credono che lo box-sizing: border-box; sia uno dei migliori comandi disponibili nei CSS, con tutti i suoi limiti. Tuttavia, quelle stesse limitazioni sono quelli che mi fanno chiedo se devo applicare box-sizing a tutti gli elementi:

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

Naturalmente il mio sito web dovrebbe essere compatibile con il maggior numero possibile di browser, e box-sizing crea alcune domande quando abbiamo pensa a IE7-. Tuttavia, a volte il programma è talmente stretto che sarebbe bello guadagnare qualche minuto in più non preoccupandosi di questo specifico problema.

In ogni caso, pensi che applicare box-sizing:border-box; a tutti gli elementi sia una buona politica o dovrei continuare a farlo solo per gli elementi che effettivamente ne hanno bisogno?

Answer 1

Penso che sia una grande idea. In effetti inizierò a fare lo stesso sui miei siti web.

Qui Paolo parla di utilizzarlo in quello stesso modo

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

Abbiamo utilizzato * {box-sizing: border-box;} in uno dei miei progetti (distribuito in produzione, in media oltre 1 milione di visite al mese) al lavoro per circa un anno, e sembra che regge bene. Il progetto è stato testato in IE8 & 9 e nelle versioni successive di Firefox e Chrome e non abbiamo avuto problemi. Tutti i calcoli e le animazioni di jQuery (+ UI) offset funzionano bene, anche in qualsiasi elemento che abbiamo visualizzato come blocco in linea. Abbiamo iniziato a testare il progetto su dispositivi mobili (iPhone, iPad e Android) e non abbiamo riscontrato alcun problema relativo al dimensionamento della scatola con nessuno di essi, quindi sembra funzionare correttamente solo per lo .

ho trovato questo per aiutare a prendersi cura dei problemi in IE7

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