web-dev-qa-db-fra.com

Comment faire fonctionner la base flexible dans IE11

Mon site Web est complètement cassé dans IE11. Le problème vient de flex: 1 1 0%;, que j'utilise partout grâce à autoprefixer et postcss-flexbugs-fixes .

Le site fonctionne sur IE lorsque je le change en flex: 1 1 auto;, mais certains comportements changent (par exemple, un flexbox avec deux flex: 1 1 auto; enfants qui ne prennent pas exactement le même espace). Par conséquent, cette solution casse mes conceptions sur d'autres navigateurs (tout en la rendant beaucoup plus agréable - pas cassée - sur IE11).

Comment les gens parviennent-ils à faire construire leurs sites avec Flexbox fonctionne sur IE11?

Edit: voici un stylo qui met en évidence le problème auquel je suis confronté: https://codepen.io/Zephir77167/pen/GMjBrd (essayez-le sur Chrome et IE11) ).

Edit2: voici le code:

HTML:

<div id="a" class="flex">
  <div id="b" class="item flex-1">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1">
    Heyheyheyheyho
  </div>
</div>
<br />
<div id="a" class="flex">
  <div id="b" class="item flex-1-variation">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1-variation">
    Heyheyheyheyho
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
}

#a {
  background-color: pink;
  height: 300px;
  width: 100px;
}

#b {
  background-color: green;
  height: 50px;
}

#c {
  background-color: blue;
  height: 100px;
}

#d {
  background-color: yellow;
  height: 150px;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.item.flex-0 {
  flex: none;
}

.item.flex-1 {
  flex: 1 1 0%;
}

.item.flex-1-variation {
  flex: 1 1 auto;
}
csscss3internet-explorerflexboxinternet-explorer-11
8
adrienharnay

En ce qui concerne IE11, vous pouvez le cibler explicitement en utilisant cette règle CSS:

_:-ms-fullscreen, :root .IE11-only-class { 

  /* IE11 specific properties */

}

Extrait de pile

* {
  box-sizing: border-box;
}

#a {
  background-color: pink;
  height: 300px;
  width: 100px;
}

#b {
  background-color: green;
  height: 50px;
}

#c {
  background-color: blue;
  height: 100px;
}

#d {
  background-color: yellow;
  height: 150px;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.item.flex-0 {
  flex: none;
}

.item.flex-1 {
  flex: 1 1 0%;
}

_:-ms-fullscreen, :root .IE-FlexAuto {
  flex-basis: auto;
}
<div id="a" class="flex">
  <div id="b" class="item flex-1 IE-FlexAuto">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1 IE-FlexAuto">
    Heyheyheyheyho
  </div>
</div>

Voici un article avec une de mes réponses, qui en parle un peu plus, et fournit également des solutions de script qui pourraient être utiles

9
LGSon