Flexbox alternative pour IE9

J'ai développé un site web avec google Chrome, à l'origine (plus facile à concevoir), mais maintenant je suis arriver à IE modèle de soutien.

Cela étant dit, j'ai commencé avec IE11 et faites les modifications nécessaires pour l'excentrique différences entre IE & Chrome. Mais maintenant, je me retire les versions IE. J'ai été en mesure d'obtenir 90% des pages web pour afficher correctement avec les CSS pour IE10. Mais maintenant, la plupart du CSS des éléments que j'ai pour ces deux navigateurs, sont pour la plupart hors de propos pour IE9.

Je tiens à garder le besoin d'avoir de multiples navigateur feuilles de style spécifiques, si possible.

Premiers problèmes est la conversion de IE10+ mise en œuvre de la flexbox modèle de CSS.

Actuel de la mise en Œuvre de la flexbox conteneur:

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 ne pas mettre en œuvre Flexbox, donc merci de ne pas insulter la recherche je l'ai déjà fait. J'ai besoin d'un équivalent de mise en œuvre qui va me permettre de modifier le code HTML aussi peu que possible.

vous ne dites pas comment vous l'utilisez flex biens, display:table & table-cell pourrait être une solution de repli où il serait de jouer avec la disposition ant text-align. display:flex; lui-même ne donne pas assez de vous conseiller pour certaines issues
Eh bien, la #navContainer élément est celui qui est à l'origine de la sortie de flux de problème pour IE9. J'ai posté le code HTML et prolongée des enfants de styles CSS. #teams & #requestor sont remplis par Moustache à partir de modèles. De nouveau le problème, c'est vraiment avec le #navContainer, comme IE10+ et Chrome ça fonctionne comme prévu. Son IE9, j'ai besoin d'essayer d'obtenir une mise en œuvre correcte pour.
Vous devriez vérifier Flexie.js.
Ce n'est pas une réponse à flexbox sur IE9, mais si vous ajoutez fournisseur de préfixes à l'appui de IE10 envisager d'utiliser Autoprefixer. Il le rend facile.
Utilisation autoprefixer.

InformationsquelleAutor GoldBishop | 2014-06-23

74

Utilisation modernizr pour détecter si le flex fonctionnalités sont présentes, et de fournir des styles de secours le cas échéant. Modernizr permettra d'ajouter des classes comme flexbox, no-flexbox, et flexbox-legacy à l'élément html dans vos styles que vous pouvez utiliser:
```
    .container {
        display: flex;
    }
    .no-flexbox .container {
        display: table-cell;
    }
```
Je recommande fortement la lecture par le biais de Zoe Gillenwater de l' (@zomigi) des présentations sur le sujet, notamment Nivellement Par Le Haut, Avec Flexbox (Smart Web Conférence - Septembre 2014)
- diapositive 21: navigation horizontale espacement > display: inline-block;
- diapositive 62: épingler des éléments sans flexbox > display: table-cell;
- diapositive 70,71: alignement de formes de base
- diapositive 88,91: exemple avec et sans flex afin
Aussi, dans sa présentation CSS3 Mise en page, il y a un peu de bon côte du côté des aperçus de la mise en page et sans flexbox:
- diapositive 73: à l'Aide de inline-block avec flexbox: horizontal forme
- diapositive 79: à l'Aide de inline-block avec flexbox: navigation horizontale
Certains des plats à emporter pour moi:
- prise en charge du navigateur ie10+, c'est très bon caniuse
- utilisation auto-prefixr pour gérer les préfixes de navigateur
- utiliser modernizr pour fournir des issues
- "flexbox est pas tout ou rien" @zomigi
- .conteneur { display: flex; display: table-cell; }
- Je pense qu'il devrait être .container {display: table-cell; display: flex;}
InformationsquelleAutor ptim
45

J'aime la réponse ci-dessus, mais vous n'avez pas à utiliser modernizr.
Vous pouvez simplement utiliser la disposition de table pour ie9 et flexbox pour les autres.
```
.container {
    display: table-cell; // ie9
    display: flex;       // others
}
```
- nice! Je suppose qu'il peut y avoir certains cas où flexbox-legacy navigateurs rendre un peu différemment.. autoprefixer est toujours à portée de main!
- Cela ne fonctionne pas. C'est l'enfant des éléments de .container qui doivent être placés en ligne, pas .container lui-même.
- Ajoutez le code ci-dessus pour les éléments d'enfant, si c'est ce dont vous avez besoin.
- Je voudrais créer une mixin de sorte qu'un autre dev, mais le plus probable de moi-même, ne pas oublier d'ajouter dans la solution de repli: @mixin display-flex() {display: table-cell; display: flex;}
InformationsquelleAutor Scott Romack
9

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

Près de 2000 étoiles sur Github, mais le dernier commit était il y a 3 mois, je ne sais pas si c'est toujours activement maintenu.
- la qualité de l'utilitaire n'a pas besoin de beaucoup d'activer les modifications. Google BootStrap semble également fournir les fonctionnalités que nous avons tous lutté avec.
- En fait, c'est Twitter Bootstrap. Just sayin'. 😉
- Aspects techniques, ils viennent tous de la même branche de l'arbre 😉
InformationsquelleAutor Michael Rambeau

Vous devez vous connecter pour publier un commentaire.