CSS la larghezza include il riempimento?

146

Sembra che in IE la larghezza includa la dimensione dell'imbottitura. mentre in FF, la larghezza no. Come posso fare in modo che entrambi si comportino allo stesso modo?

Grazie.

css

— Jake
fonte

Probabilmente dovrai attivare la modalità conforme agli standard. Senza vedere un po 'di codice, tuttavia, non posso darti più indicazioni di così.

— Jeff Hubbard,

307

IE utilizzava il modello di scatola "border-box" più conveniente ma non standard . In questo modello, la larghezza di un elemento include l'imbottitura e i bordi. Ad esempio:
#foo { width: 10em; padding: 2em; border: 1em; }
sarebbe 10emampio.
Al contrario, tutti i browser che temono gli standard passano automaticamente al modello di casella "content box" . In questo modello, la larghezza di un elemento non include imbottitura o bordi. Ad esempio:
#foo { width: 10em; padding: 2em; border: 1em; }
sarà effettivamente 16emlargo: 10em+ 2emimbottitura per ogni lato, + 1embordo per ogni bordo.

Se si utilizza una versione moderna di IE con markup valido , un buon doctype e intestazioni appropriate , aderirà allo standard. Altrimenti, puoi forzare i moderni browser conformi agli standard a utilizzare "border-box" tramite:

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

La prima dichiarazione è necessaria per Opera, la seconda per Firefox, la terza per Webkit e Chrome.

Ecco un semplice test che ho fatto anni fa per testare quale dichiarazione di ridimensionamento supporta il tuo browser: http://phrogz.net/CSS/boxsizing.html

Si noti che Webkit (Safari e Chrome) non supporta il padding-boxmodello di scatola tramite alcuna dichiarazione.

— Phrogz
fonte

2

+1 per menzionare sia la casella del contenuto che i modelli del riquadro. Potrebbe voler approfondire le differenze però.

— BoltClock

1

@BoltClock Grazie per l'impulso di rispondere in modo più rigoroso. Aggiornato.

— Phrogz,

Bella risposta; Ho cercato di ricordare (o trovare) i nomi delle diverse opzioni per un paio di giorni ... +1 =)

— David dice di reintegrare Monica il

A nessuno importa dell'opera.

— Michael J. Calkins,

3

@whitelettersinblankpapers Scopri perché W3Schools fa schifo e quindi un riferimento di gran lunga migliore che ti porta allo standard W3C . Non seguire altri collegamenti a W3Schools. Inoltre, aggiungi "MDN" alle domande del tuo motore di ricerca sugli standard web in futuro.

— Phrogz

27

Una semplice regola è cercare di evitare l'uso della proprietà padding / margin e width per lo stesso elemento. cioè usa qualcosa di simile a questo

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

— shankhan
fonte

Uso questo metodo su base regolare e non ho mai problemi con il browser.

— Kevin Beal,

20

Mi sono imbattuto in questa domanda e anche se ha un paio d'anni, ho pensato di poterlo aggiungere nel caso qualcuno si imbattesse in questo thread.

CSS3 ora ha una proprietà di ridimensionamento della casella. Se si imposta, dire,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

la tua classe sarà larga 1000 px, anziché 1030 px. Questo è, ovviamente, incredibilmente utile per chiunque utilizzi bordi di dimensioni pixel con div liquidi, perché risolve un problema altrimenti insolubile.

Ancora meglio, il ridimensionamento delle caselle è supportato da tutti i principali browser tranne IE7 e versioni precedenti. Per includere tutti gli elementi nella dimensione larghezza o altezza, impostare il ridimensionamento della casella su border-box. Per aggregare altri elementi alla larghezza e / o altezza, che è l'impostazione predefinita, è possibile impostare il ridimensionamento della casella su "casella del contenuto".

Non sono sicuro dell'attuale stato della sintassi del browser, ma includo ancora i prefissi -moz e -webkit:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

— Chiatta del muratore
fonte

Sì, e Paul Irish ha pubblicato un bell'articolo sul blog qui: paulirish.com/2012/box-sizing-border-box-ftw

— Dave Burton,

In che modo questa risposta ha tanti voti positivi quando la stessa risposta accettata è stata scritta 3 anni prima?

— dippas,

1

Hai dichiarato un tipo di documento? Quando ho iniziato a scrivere codice HTML ho avuto questo problema, e non è stato dichiarato un doctype. Il mio preferito è:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>

— tybro0103
fonte

1

per coloro che avrebbero ancora il problema, jQuery ha fornito due proprietà outerWidth ()e innerWitdh ()per conoscere la larghezza di un oggetto con o senza bordi ...

— Patrick
fonte