Ho una semplice pagina web con alcuni contenuti Lipsum centrati sulla pagina. La pagina funziona bene in Chrome e Firefox. Se riduco le dimensioni della finestra, il contenuto riempie la finestra fino a quando non è possibile, quindi aggiunge una barra di scorrimento e riempie il contenuto fuori dallo schermo, verso il basso.
Tuttavia, la pagina non è centrata in IE11. Posso centrare la pagina in IE flettendo il corpo, ma se lo faccio, il contenuto inizia a uscire dallo schermo verso l'alto e taglia la parte superiore del contenuto.
Di seguito sono riportati i due scenari. Vedi i violini associati. Se il problema non è subito evidente, riduci le dimensioni della finestra dei risultati in modo che sia costretta a generare una barra di scorrimento.
Nota: questa applicazione si rivolge solo alle ultime versioni di Firefox, Chrome e IE (IE11), che supportano tutte la raccomandazione del candidato di Flexbox , quindi la compatibilità delle funzionalità non dovrebbe essere un problema (in teoria).
Modifica : quando si utilizza l'API a schermo intero per visualizzare a schermo intero il div esterno, tutti i browser vengono centrati correttamente utilizzando il CSS originale. Tuttavia, uscendo dalla modalità a schermo intero, IE torna ad essere centrato orizzontalmente e allineato verticalmente in alto.
Modifica : IE11 utilizza un'implementazione non specifica del fornitore di Flexbox. Aggiornamenti del layout della scatola flessibile ("Flexbox")
Centra e ridimensiona correttamente in Chrome / FF, non centra ma ridimensiona correttamente in IE11
Fiddle: http://jsfiddle.net/Dragonseer/3D6vw/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
Centra correttamente ovunque, taglia fuori quando viene ridimensionato
Fiddle: http://jsfiddle.net/Dragonseer/5CxAy/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display: flex;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
-ms-flexbox
per IE ..