web-dev-qa-db-fra.com

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 devrait arriver est que input[type=submit] devrait avoir une largeur de 31px et input[type=text] occupe le reste de l’espace disponible dans form. Ce qui se produit est input[type=text] _ juste une valeur par défaut de 263px pour une raison quelconque.

Cela fonctionne très bien dans Chrome et Firefox.

cssinternet-explorerflexbox
45
JacobTheDev

Les modes de mise en page Flex ne sont pas encore (complètement) pris en charge de manière native dans IE. IE10 implémente la version "tween" de la spécification qui n'est pas complètement récente, mais fonctionne toujours.

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

Cet article CSS-Tricks contient des conseils sur l'utilisation de flexbox par plusieurs navigateurs (y compris IE): http://css-tricks.com/using-flexbox/

edit: après un peu plus de recherches, IE10 flexbox mode de présentation implémenté conformément aux spécifications provisoires du W3C de mars 2012: http://www.w3.org/TR/2012/WD-css3- flexbox-20120322 /

La version la plus récente date d’au moins une année environ: http://dev.w3.org/csswg/css-flexbox/

41
Ennui

Comme Ennui l’a mentionné, IE 10 prend en charge le -ms version préfixée de Flexbox (IE 11 le prend en charge sans préfixe). Les erreurs que je peux voir dans votre code sont les suivantes:

  • Tu aurais dû 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;
    /**/
}
38
Simon East

IE10 a utilise l'ancienne syntaxe. Alors:

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) signifie une syntaxe étrange non officielle de [2012] (par exemple display: flexbox;)

10
Ben