Question

所以我删除了这个代码：

<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中的问题是它们堆叠在一起，我不知道为什么。我已使用class causes-error将问题缩小到div。如果我为该元素提交了css，IE 10会将它渲染得很好（就像其他具有该css的浏览器一样，它们彼此相邻）但是我需要在此代码的完整版本中使用css（这太大了发布在这里，这是我有这个剥离版本的方式。）

有谁知道为什么IE 10会弄乱这个？

Answer 1

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

Flexbox项目堆叠在彼此的顶部IE 10

1 个答案: