如何阻止IE11使这两行相互叠加？ [英] How do I stop IE11 from making these two lines go on top of each other?

问题描述

我有以下HTML：

I have the following 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：

And the following 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;
}

你可以看到这个例子这里。



如果您在Chrome或Firefox中打开此示例，您会发现它按预期呈现：



第一行第一行第一行

第二行第二行第二行第二行

第一行第一行第一行第一行

第二行第二行第二行第二行



然而，在IE11上，第一段和第二段相互重叠，因为其中一个元素由于某种原因而具有0高度。



任何人都知道这里发生了什么？



我尝试了什么：



我尝试为父母添加固定高度，哪个有效，但我做不到。我特别希望它的大小适合它所包含的区域，它应该像Chrome等一样。

You can see this example here.

If you open this example in Chrome or Firefox, you will notice it renders as expected:

first line first line first line first line
second line second line second line second line
first line first line first line first line
second line second line second line second line

However, on IE11, the first and second paragraph go on top of each other because one of the elements has 0 height for some reason.

Anyone know what's going on here?

What I have tried:

I have tried adding a fixed height to the parent, which works, but I can't do that. I specifically want it to size-to-fit the area it's contained in, which it should do like Chrome etc.

推荐答案

答案：



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

ANSWER:

For whatever reason, it appears the -ms-flex line must be set to 1 0 auto; instead of just 1. So the corrected CSS would look like:

.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。

I'm not sure why this works, but I suspect the default for -ms-flex is processed differently then flex in IE.

这篇关于如何阻止IE11使这两行相互叠加？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！