web-dev-qa-db-fra.com

Flexbox alternative pour IE9

J'ai développé un site Web avec Chrome au début (le plus facile à concevoir pour)), mais j'arrive maintenant au IE modèle de support.

Cela étant dit, j’ai commencé avec IE11 et apporté les modifications nécessaires aux différences insolites entre IE et Chrome. Mais maintenant, je quitte les IE versions. J'ai réussi à obtenir que 90% des pages Web s'affichent correctement avec CSS pour IE10, mais à présent, la plupart des éléments CSS que j'ai pour ces deux navigateurs ne sont pour la plupart pas pertinents pour IE9.

J'aimerais éviter d'avoir besoin de plusieurs feuilles de style spécifiques au navigateur, si possible.

Le premier problème est la conversion de l'implémentation IE10 + du modèle flexbox de CSS.

Implémentation actuelle du conteneur 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>

Je sais que IE9 n'implémente pas la Flexbox, donc, n'insultez pas les recherches que j'ai déjà effectuées. J'ai besoin d'une implémentation équivalente qui me permettra de modifier le moins possible le code HTML.

htmlcssinternet-explorercross-browserflexbox
39
GoldBishop

Utilisez modernizr pour déterminer si des capacités flexibles sont présentes et fournissez des styles de secours si nécessaire. Modernizr ajoutera des classes comme flexbox, no-flexbox, et flexbox-legacy à l’élément html, vous pouvez donc utiliser dans vos styles:

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

Je recommande fortement de lire les présentations de Zoe Gillenwater ( @ (zomigi ) sur le sujet, en particulier Leveling Up With Flexbox (Conférence Smart Web - septembre 2014)

  • diapositive 21: espacement de navigation horizontale> display: inline-block;
  • diapositive 62: épingler des éléments sans flexbox> display: table-cell;
  • diapositive 70,71: aligner les repliements des formulaires
  • slide 88,91: exemple avec et sans commande de flex

De plus, dans sa présentation CSS3 Layout , il existe quelques bons aperçus côte à côte de mises en page avec et sans flexbox:

  • diapositive 73: Utilisation de bloc en ligne avec flexbox: forme horizontale
  • diapositive 79: Utilisation du bloc en ligne avec la flexbox: navigation horizontale

Quelques plats à emporter pour moi:

  • la prise en charge du navigateur ie10 + est plutôt bonne caniuse
  • utilisez auto-prefixr pour gérer les préfixes du navigateur
  • utiliser modernizr pour fournir des solutions de rechange
  • "flexbox n'est pas tout ou rien" @zomigi
74
ptim

J'aime la réponse ci-dessus, mais vous n'avez pas à utiliser modernizr. Vous pouvez simplement utiliser la disposition de la table pour ie9 et flexbox pour les autres.

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

Un an plus tard, cette solution, utilisant JavaScript pour ajuster la mise en page dans les navigateurs plus anciens, semble intéressante => https://github.com/10up/flexibility

Près de 2000 étoiles sur Github, mais le dernier engagement remonte à 3 mois, je ne sais pas s'il est toujours activement maintenu.

9
Michael Rambeau