IE 11 中的 Flex 容器未正确对齐

Question

我对以下 sn-p 有疑问：我需要让它在 Internet Explorer 11 中工作。在 Chrome、Firefox 和 Edge 中看起来应该是这样。

有 3 种元素（红色、黄色、绿色），彼此相连。另一个高度为 50% 的蓝色元素位于其他元素之上。 应该是这样的：

但是 Internet Explorer 11 将蓝色元素放在右侧的下方，而不是在其他元素的顶部。你们能帮我解决这个问题吗？

这是它在 IE11 中的样子——它不应该是这样的

.wrapper {
    display: block;
    height: 50px;
}

.flex-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    margin: 2px 0;
}

.outer,
.inner {
    width: 100%;
    max-width: 100%;
    display: flex;
}

.outer {
    height: 100%;
}

.inner {
    height: 30%;
    align-self: center;
    position: absolute;
}

.inner-element,
.outer-element {
    height: 100%;
    max-width: 100%;
    align-self: flex-start;
}

<div class="wrapper">
<div class="flex-wrapper">
    <div class="outer">
        <div class="outer-element" style="width: 10%; background-color: red"></div>
        <div class="outer-element" style="width: 50%; background-color: yellow"></div>
        <div class="outer-element" style="width: 40%; background-color: green"></div>
    </div>

    <div class="inner">
        <div class="inner-element" style="width: 50%; background-color: blue"></div>
    </div>
</div>
</div>

Answer 1

问题

问题是你绝对定位.inner，但没有给它一个特定的位置。这意味着浏览器首先呈现它的位置就是它将在屏幕上输出的位置。似乎 IE 处理此问题的方式与其他浏览器不同，这就是您得到差异的原因。

解决办法

需要进行以下修改：

• 将left: 0; 添加到.inner 以使其与.flex-wrapper 的左侧对齐
• 将top: 50%; 添加到.inner 可将其向下移动.flex-wrapper 的50% 和transform: translateY(-50%); 以将其向后移动其高度的50%

.wrapper {
  display: block;
  height: 50px;
}

.flex-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  margin: 2px 0;
}

.outer,
.inner {
  width: 100%;
  max-width: 100%;
  display: flex;
}

.outer {
  height: 100%;
}

.inner {
  height: 30%;
  align-self: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.inner-element,
.outer-element {
  height: 100%;
  max-width: 100%;
  align-self: flex-start;
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="outer">
      <div class="outer-element" style="width: 10%; background-color: red"></div>
      <div class="outer-element" style="width: 50%; background-color: yellow"></div>
      <div class="outer-element" style="width: 40%; background-color: green"></div>
    </div>

    <div class="inner">
      <div class="inner-element" style="width: 50%; background-color: blue"></div>
    </div>
  </div>
</div>

Answer 2

我会做出一些改变。

第一：
- 职位.inner
- 由于其位置，使其全高
- 让它display: flex

.inner {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    display: flex;
}

第二： - 给.inner-element一个高度 - 居中

.inner-element {
    height: 30%;
    align-self: center;
}

.wrapper {
    display: block;
    height: 50px;
}

.flex-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    margin: 2px 0;
}

.outer,
.inner {
    width: 100%;
    max-width: 100%;
    display: flex;
}

.outer {
    height: 100%;
}

.inner {
    /*height: 30%; No need for that anymore */
    /*align-self: center; No need for that anymore */
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0; /* Now it's in the right position */
    display: flex; /* To be able to align the inner-element */
}

.inner-element,
.outer-element {
    height: 100%;
    max-width: 100%;
    align-self: flex-start;
}

.inner-element {
    height: 30%; /* Make it the right height */
    align-self: center; /* Center it */
}

<div class="wrapper">
<div class="flex-wrapper">
    <div class="outer">
        <div class="outer-element" style="width: 10%; background-color: red"></div>
        <div class="outer-element" style="width: 50%; background-color: yellow"></div>
        <div class="outer-element" style="width: 40%; background-color: green"></div>
    </div>

    <div class="inner">
        <div class="inner-element" style="width: 50%; background-color: blue"></div>
    </div>
</div>
</div>