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
demandé sur isherwood 2013-08-02 18:28:56

3 réponses

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/

39
répondu Ennui 2013-08-02 14:48:14

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;
    /**/
}
34
répondu Simon East 2015-09-11 00:39:06

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;)

9
répondu Ben 2016-04-26 09:01:29