Question

我只有IE11的问题（Chrome + FF工作正常），其中2行正在进行＆＃34;在顶部＆＃34;彼此。

HTML：

<div>
  <label>first line first line first line first line</label>
  <div>
    <div class="content">
      <div class="contentFieldset">
        <div class="inner">
          second line second line second line second line
        </div>
      </div>
    </div>
  </div>
</div>

<div>
  <label>first line first line first line first line</label>
  <div>
    <div class="content">
      <div class="contentFieldset">
        <div class="inner">
          second line second line second line second line
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.content {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.contentFieldset {
  flex: 1;
  -ms-flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.inner {
  display: flex;
  flex-direction: row !important;
  flex: 1;
  -ms-flex: 1;
  min-width: 0;
}

我的设置需要这个嵌套结构（我在这个例子中显然简化了它），并且如果顶部div设置了静态高度（例如，250px），它可以工作但是我需要它来填充可用空间。

有没有人知道我可以使用的解决方法，使其无需删除flexbox或说不使用IE？感谢。

Answer 1

我听说过其他问题，请更改你的＆＃34; display：flex＆＃34;到＆＃34;显示：块＆＃34;。在这个小提琴里为我工作：

https://jsfiddle.net/3L2bx9w9/3/

.content {
  display: block;
  flex-direction: row;
  height: 100%;
}

.contentFieldset {
  flex: 1;
  -ms-flex: 1;
  min-width: 0;
  display: block;
  flex-direction: column;
}

.inner {
  display: block;
  flex-direction: row !important;
  flex: 1;
  -ms-flex: 1;
  min-width: 0;
}

Answer 2

解答：

无论出于何种原因，-ms-flex行必须设置为1 0 auto;而不是1。所以纠正后的CSS看起来像是：

.content {
  display: block;
  flex-direction: row;
  height: 100%;
}

.contentFieldset {
  flex: 1;
  -ms-flex: 1 0 auto;
  min-width: 0;
  display: block;
  flex-direction: column;
}

.inner {
  display: block;
  flex-direction: row !important;
  flex: 1;
  -ms-flex: 1 0 auto;
  min-width: 0;
}

我不确定为什么会这样，但我怀疑-ms-flex的默认处理方式与IE中的flex不同。

如何阻止IE11使这两行相互叠加？

2 个答案: