CSS flexbox ne fonctionne pas dans IE10

Question

CSS flexbox ne fonctionne pas dans IE10

Dans IE10, ce code ne fonctionne pas correctement:

.flexbox form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex: auto 1;
    -moz-flex: auto 1;
    -ms-flex: auto 1;
    -o-flex: auto 1;
    flex: auto 1;
}

Ce qui doit arriver, c'est que input[type=submit] devrait être 31px large, avec input[type=text] occuper le reste de l'espace disponible dans form. Ce qui se passe est input[type=text] juste par défaut 263px pour une raison quelconque.

cela fonctionne très bien dans Chrome et Firefox.

43

css flexbox internet-explorer

demandé sur isherwood 2013-08-02 18:28:56

3 réponses

score 39 · Answer 1

les modes de layout Flex ne sont pas (entièrement) nativement pris en charge dans IE. IE10 implémente la version" tween " de la spécification qui n'est pas entièrement récente, mais qui fonctionne toujours.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

cet article de CSS-Tricks contient quelques conseils sur l'utilisation croisée de flexbox (y compris IE): http://css-tricks.com/using-flexbox/

edit: après un peu plus de recherche, IE10 Flexbox layout mise en œuvre du mode Mise à jour de L'ébauche du W3C de mars 2012:http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

La plupart des projets actuels est d'un an ou de manière plus récente: http://dev.w3.org/csswg/css-flexbox/

score 34 · Answer 2

comme Ennui l'a mentionné, IE 10 supporte le -ms version préfixée de Flexbox (IE 11 supporte la version non corrigée). Les erreurs que je peux voir dans votre code sont:

Vous devriez avoir display: -ms-flexbox au lieu de display: -ms-flex
je pense que vous devriez spécifier toutes les 3 flex valeurs, comme flex: 0 1 auto pour éviter toute ambiguïté

donc le code final mis à jour est...

.flexbox form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;

    /* Direction defaults to 'row', so not really necessary to specify */
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;

    /* Flex should have 3 values which is shorthand for 
       <flex-grow> <flex-shrink> <flex-basis> */
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -o-flex: 1 1 auto;
    flex: 1 1 auto;

    /* I don't think you need 'display: flex' on child elements * /
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    /**/
}

score 9 · Answer 3

IE10 utilise l'ancienne syntaxe. Donc:

display: -ms-flexbox; /* will work on IE10 */
display: flex; /* is new syntax, will not work on IE10 */

voir css-tricks.com/snippets/css/a-guide-to-flexbox:

(tweener): un étrange officieux de la syntaxe à partir de [2012] (par exemple: flexbox;)

Las etiquetas más populares

CSS flexbox ne fonctionne pas dans IE10

3 réponses