html display - Flexbox e Internet Explorer 11 (pantalla: flex in <html>?)




2 Answers

De acuerdo con http://caniuse.com/#feat=flexbox :

"Los valores predeterminados IE10 e IE11 para flex son 0 0 auto lugar de 0 1 auto , según el borrador de la especificación, a partir de septiembre de 2013"

Entonces, en palabras simples, si en alguna parte de su CSS tiene algo como esto: flex:1 , eso no se traduce de la misma manera en todos los navegadores. Intenta cambiarlo a 1 0 0 y creo que inmediatamente verás que funciona -kinda-.

El problema es que esta solución probablemente arruinará Firefox, pero luego puedes usar algunos hacks para orientar solo a Mozilla y cambiarlo de nuevo:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

Como flexbox es un candidato W3C y no es oficial, los navegadores tienden a dar resultados diferentes, pero creo que eso cambiará en el futuro inmediato.

Si alguien tiene una mejor respuesta, me gustaría saberlo.

tutorial boxes

Estoy planeando alejarme de los diseños "flotantes" y usar css flexbox para proyectos futuros. Me alegré de ver que todos los principales navegadores en sus versiones actuales parecen ser compatibles (de una manera u otra) con flexbox.

Me dirigí a "Solucionado por Flexbox" http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ para ver algunos ejemplos. Sin embargo, el ejemplo de "pie de página fijo" no parece funcionar en IE11. Jugué un poco y lo puse a funcionar agregando display:flex al <html> y width:100% al <body>

Entonces mi primera pregunta es: ¿Alguien puede explicarme esa lógica? Simplemente jugueteé y funcionó, pero no entiendo por qué funcionó de esa manera ...

Luego está el ejemplo de "Objeto multimedia" que funciona en todos los navegadores, excepto - lo adivinaste - IE. Jugué con eso también, pero sin éxito.

Por lo tanto, mi segunda pregunta es: ¿hay una posibilidad "limpia" para que el ejemplo de "Objeto multimedia" funcione en IE?




Solo necesitas flex:1 ; Arreglará el problema para IE11. Yo segundo Odisseas. Además, asigne 100% de altura a html, elementos del cuerpo .

Cambios de CSS:

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

URL de trabajo: http://jsfiddle.net/3tpuryso/13/




Related