Vedi questo esempio: http://jsfiddle.net/vrgT3/5/min-height/min-width non rispetta box-dimensionamento in alcuni browser
Ho fatto un div 250x250px genitore con overflow: auto; così le barre di scorrimento appaiono quando il contenuto di overflow casella. Ho impostato uno sfondo blu per rendere più chiaro quando il genitore è visibile.
All'interno del genitore è un div bambino con sfondo rosso per la visibilità. Ha i bordi neri 8px e box-sizing: border-box;, quindi il riempimento e i bordi sono inclusi nel calcolo della dimensione della scatola. Il div child è impostato su min-height: 100% e min-width: 100%.
Risultato atteso: Il div bambino deve avere le stesse dimensioni del genitore, quindi non viene mostrato alcun blu e non vengono visualizzate barre di scorrimento. La dimensione della casella calcolata (contenuto + riempimento + bordi) deve essere 250x250px. Ci dovrebbero essere 8px bordi neri che lo circondano, lasciando una regione rossa 234x234px.
Compatibile con:
- Midori 4.1 Ubuntu
- Chromium 16 Ubuntu
- Opera 11.61 di Ubuntu
Problemi con:
IE 8 WinXP: vengono visualizzate le barre di scorrimento orizzontali e verticali. Il contenuto è
249x266pxcon bordi8pxcon dimensioni di casella calcolate di265x282px.Firefox 3.6 WinXP: viene visualizzata la barra di scorrimento verticale. Il contenuto è
217x250pxe la dimensione della casella calcolata è233x266px.Firefox 10 Ubuntu: appare barra di scorrimento verticale, il contenuto è
221x250px, formato della scatola calcolata è237x266px.
Ho controllato caniuse.com e sembra che almeno i browser in questione sostengono la richiesta min-height, min-width e box-sizing. Cosa dà?
Soluzione: Come suggerito da Marat, questo è davvero un bug del browser. Ho risolto una soluzione alternativa utilizzando JavaScript per aggiungere padding/margini per correggere le differenze in offsetWidth/Height. Guardalo qui: http://jsfiddle.net/vrgT3/8/
IE8 ha avuto problemi noti con larghezza/altezza min/max e overflow; il dimensionamento della scatola non è rilevante. Per quanto riguarda gli altri ... – BoltClock
Grazie per la pronta risposta! Ho provato a rimuovere la proprietà 'overflow' (quindi tornare a' overflow: visible') e sto ancora ottenendo dimensioni errate sia in IE che in FF.Lo scopo del 'dimensionamento della scatola 'è quello di includere i bordi grandi nel' min- *: 100% '. Funziona come previsto con Midori, Opera e Chromium. – kueblc
Vedere anche http://css-tricks.com/box-sizing/ (sezione "Min/Max" sotto la sezione "Supporto") –