バグ/IE11で横並び要素が落ちる（3カラム）

2981 ワード
CSS バグ IE CSS テキストリンク

状況

flexで３つの要素を横並びにしていたが、IE11でだけ一つ分落ちる。

↑こうしたいのに


↑こうなる。

<ul class="target">
  <li>1</li>
  <li>2</li>
  <li>3</li>  
</ul>

.target {
  display: -webkit-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: wrap;
  flex-flow: wrap;
}
.target > li {
  width: calc(100% * 1/3);
}

原因

flexのIE特有のバグかと思って調べてたのですがwidth: calc(100%* 1/3);こいつが犯人だと判明。IE11の 1/3 と 他ブラウザの 1/3　は違う値になるみたいです（ブラウザによる小数点の扱いの違いなのかな）。

解決方法

IE11のみwidthの指定を変える必要がある。
以下のコードを追加。

*::-ms-backdrop, .target > li {
  width: 33.33%
}

で、解決。
先輩に聞いたらすぐに、あーそれ33.33の…って言われたので有名みたいですね。
（もっと早く聞けばよかった…）