Share
Lo standard CSS stabilisce che i bordi e il riempimento devono essere applicati sopra la larghezza specificata di un elemento. Come tale, se ho un div 200px e valgo 40px di bordi e padding, totale, la larghezza sarà 240px. Questo ha perfettamente senso; tuttavia, Internet Explorer ha effettivamente fatto le cose in modo diverso. Hanno adottato un modello in cui la larghezza massima è quella che hai specificato. I bordi e il riempimento vengono quindi considerati in tale larghezza, riducendo l'area del contenuto. Di conseguenza, la larghezza dell'elemento non supera mai la larghezza indicata di 200 px.
Poiché per la maggior parte lavoriamo con layout float estremamente sensibili, dove anche l'aggiunta di un bordo 1px può rompere il design, mi chiedo: Internet Explorer ha capito bene?
"La proprietà CSS di ridimensionamento della casella viene utilizzata per modificare il modello di box CSS predefinito utilizzato per calcolare le larghezze e le altezze degli elementi. È possibile utilizzare questa proprietà per emulare il comportamento dei browser che non supportano correttamente le specifiche del modello di box CSS. "
Ciò significa che, se dovessi decidere di voler simulare l'interpretazione originale di Internet Explorer del modello di box, puoi farlo. Il valore predefinito per il ridimensionamento della casella è "casella di contenuto". Ciò significa semplicemente che la larghezza e l'altezza di un elemento non includono i bordi e il riempimento (oi margini).
Cambiando questo valore in "border-box", i valori di larghezza e altezza quindi includere i bordi e le imbottiture.
#box width: 200px; altezza: 200 px; sfondo: rosso; imbottitura: 10px; bordo: 10px solido nero; -moz-box-dimensionamento: border-box; -webkit-box-dimensionamento: border-box; dimensionamento della scatola: border-box;
Perché abbiamo dichiarato box-sizing con un valore di "border-box", la larghezza finale dell'elemento #box, in alto, sarà di 200 px.
Soprattutto per i layout fluttuanti, questo può farti risparmiare un sacco di mal di testa! Ma con ciò detto, sono ancora indeciso. Quali sono i tuoi pensieri sull'interpretazione di Internet Explorer del modello box?
Accentsconagua