html - Flexbox 元素堆叠在彼此之上 IE 10

Question

所以我有这个精简的代码笔:

http://codepen.io/anon/pen/xGmeEw

<div class="input-group">
  <div class="input-group-item">
    <div class="causes-error">
      <label>
        <input type="checkbox" />
        <span>I want to receive weekly newsletters</span>
      </label>
    </div>
  </div>
  <div class="input-group-item">
    <div class="causes-error">
      <label >
        <input type="checkbox" />
        <span>I agree to terms and conditions</span>
      </label>
    </div>
  </div>
</div>

<div class="input-group m-align-start">
  <div class="input-group-item">
    <div class="causes-error">
      <label>
        <input type="checkbox" />
        <span>I want to receive weekly newsletters</span>
      </label>
    </div>
  </div>
  <div class="input-group-item">
    <div class="causes-error">
      <label >
        <input type="checkbox" />
        <span>I agree to terms and conditions</span>
      </label>
    </div>
  </div>
</div>

@import "bourbon";

* {
  box-sizing: border-box;
}

@mixin flexbox-value-width($width) {
  @include flex(0 0 $width);

  max-width: $width;
}

.input-group {
  @include display(flex);
  @include flex-wrap(wrap);
  @include justify-content(space-between);
}

.input-group-item {
  @include flexbox-value-width(100%);
  @include flex(1);
}

.input-group.m-align-start {
  @include justify-content(flex-start);
}

.input-group.m-align-start .input-group-item {
  @include flex(0 1 auto);
}

.causes-error {
  @include display(flex);
  @include align-items(center);
}

label {
  @include display(flex);
  @include align-items(center);
  @include flex(1 0 0px);
}

最上面的一组复选框在 Chrome、FireFox 和 IE 10 中呈现良好，但第二组复选框在 IE 10 中呈现不正确(Chrome 和 FireFox 呈现良好)。 IE 10 中的问题是它们堆叠在一起，我不确定为什么。我已将问题缩小到具有 causes-error 的 class 的 div。如果我提交该元素的 css，IE 10 会很好地渲染它(它们彼此相邻，就像其他具有该 css 的浏览器一样)但是我需要此代码的完整版本中的 css(这太大了在这里发布，这就是我拥有这个精简版的方式)。

有人知道为什么 IE 10 会搞砸吗？

Answer 1

IE10 only gives partial support to flex通过要求前缀 -ms- 并遵循旧的 2012 语法。