html - images - flexbox internet explorer

Alternativa de Flexbox para IE9

Question

Desarrollé inicialmente un sitio web con Chrome (el más fácil de diseñar) pero ahora estoy llegando al modelo de soporte de IE.

Dicho esto, comencé con IE11 e hice los cambios necesarios para las extrañas diferencias entre IE y Chrome. Pero ahora estoy renunciando a las versiones de IE. Logré que el 90% de las páginas web se mostraran correctamente con CSS para IE10. Pero ahora la mayoría de los elementos de CSS que tengo para estos dos navegadores, en su mayoría son irrelevantes para IE9.

Me gustaría evitar la necesidad de tener varias hojas de estilo específicas del navegador, si es posible.

El primer problema es convertir la implementación de IE10 + del modelo de flexbox de CSS.

Implementación actual para el contenedor de flexbox:

div#navContainer{
    display: flex; //Current browsers (IE11, Chrome, etc)
    display: -ms-flexbox; //IE10 implementation
}

div#TeamsSection {
    text-align: center;
}

div.NavSection {
    margin: 0px 7px;
    padding: 4px 0px 0px 0px;
}

div#teams {
    margin: 0px;

    select {
        margin: 0px;
    }
}

HTML:

<div id="navContainer" class="float-left">
    <div id="LogoSection" class="NavSection">
        <div id="Logo">
            <img src="Images/Logo.png" />
        </div>
    </div>
    <div id="TeamsSection" class="NavSection">
        <label>Select a Team:</label><br />
        <div id="teams"></div>
    </div>
    <div id="UserSection" class="NavSection hidden">
        <label>Select a User:</label><br />
        <div id="requestor"></div>
    </div>
</div>

Sé que IE9 no implementa Flexbox, así que no insultes la investigación que ya hice. Necesito una implementación equivalente que me permita cambiar el HTML lo menos posible.

Answer 1

Me gusta la respuesta anterior pero no tiene que usar modernizr. Simplemente podría usar el diseño de tabla para ie9 y flexbox para otros.

.container {
    display: table-cell; // ie9
    display: flex;       // others
}

Answer 2

Un año después, esta solución, que usa JavaScript para ajustar el diseño en los navegadores más antiguos, parece interesante => https://github.com/10up/flexibility

Casi 2000 estrellas en Github, pero el último compromiso fue hace 3 meses, no sé si todavía se mantiene activamente.

Answer 3

Use modernizr para detectar si las capacidades de flexión están presentes y proporcione estilos alternativos donde sea necesario. Modernizr agregará clases como flexbox , no-flexbox y flexbox-legacy al elemento html, por lo que en sus estilos puede usar:

    .container {
        display: flex;
    }
    .no-flexbox .container {
        display: table-cell;
    }

Recomiendo leer las presentaciones de Zoe Gillenwater ( @zomigi ) sobre el tema, especialmente subir de nivel con Flexbox (Smart Web Conference - septiembre de 2014)

• diapositiva 21: espacio de navegación horizontal> display: inline-block;
• diapositiva 62: elementos de fijación sin flexbox> display: table-cell;
• diapositiva 70,71: alineación de formas fallbacks
• diapositiva 88,91: ejemplo con y sin orden de flexión

Además, en su presentación CSS3 Layout , hay algunas buenas vistas previas laterales de layouts con y sin flexbox:

• diapositiva 73: Usar bloque en línea con flexbox: forma horizontal
• diapositiva 79: Uso del bloque en línea con flexbox: navegación horizontal

Algunos de mis puntos de partida:

• compatibilidad con el navegador ie10 + es bastante buena caniuse
• usar auto-prefixr para manejar los prefijos del navegador
• use modernizr para proporcionar retrocesos
• "Flexbox no es todo o nada" @zomigi