web-dev-qa-db-ja.com

IE11でフレックスベースを機能させる方法

IE11で私のウェブサイトが完全に壊れています。問題は、_ autoprefixer と postcss-flexbugs-fixes のおかげでどこでも使用している_flex: 1 1 0%;_に由来しています。

サイトは、IEを_flex: 1 1 auto;_に変更すると動作しますが、一部の動作が変更されます（たとえば、1つのflexbox 2つの_flex: 1 1 auto;_まったく同じスペースをとらない子）したがって、この解決策は、他のブラウザーで私の設計を破壊します（IE11では、壊れない-ずっと良くします）。

Flexbox=を使用してIE11でサイトを構築するにはどうすればよいですか？

編集：ここに私が直面している問題を強調するペンがあります： https://codepen.io/Zephir77167/pen/GMjBrd （Chrome and IE11 ）。

Edit2：コードは次のとおりです。

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

IE11に関しては、次のCSSルールを使用して明示的にターゲットにすることができます。

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

  /* IE11 specific properties */

}

スタックスニペット

* {
  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>

これは私の答えを掲載した投稿で、これについてさらに詳しく説明し、役立つかもしれないいくつかのスクリプトソリューションを提供します

9
LGSon