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

Question

我对以下代码片段有疑问:我需要让它在 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 以将其向下移动 50% 的 .flex-wrapper 和 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>