IE11 - 对齐项目不适用于弹出窗口答案

【问题标题】：IE11 - align items not working with popupIE11 - 对齐项目不适用于弹出窗口
【发布时间】：2020-11-03 16:59:58
【问题描述】：

我有一个弹出窗口，我试图在页面中垂直对齐，我使用 flex (align-items) 来做到这一点，但它不适用于 IE11。经过一些研究，我发现 IE11 中存在一个错误，其中 align-items 不适用于 min-height。我已经尝试了一些给出的解决方案，但似乎没有任何效果。

我尝试了什么：

将弹出式内部包装器上的最小高度替换为高度
保持最小高度并增加1px的高度

输出：

正确居中所有内容（chrome 和 IE），但仅在内容很少时。如果您在示例中添加更多文本，您将看到弹出窗口的顶部被剪切
与 1 中发生的情况相同

代码示例HERE

.popup-wrapper {
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}

.popup-inner-wrapper {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;
  transform: translateZ(0);
}

<div class="popup-mask">
  <div class="popup-wrapper">
    <div class="popup-inner-wrapper">
      <div class="popup-container ">
        <div class="popup-content">
          (text)
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

我的理解是：你想要一个在屏幕中间显示文本的区域吗？这样它就不会被置于 IE11 问题的顶部或底部原因？
@Warden330 不，我想要在中间显示文本的区域，但是当前的解决方案不会在 IE11 上垂直居中该区域
stackoverflow.com/questions/40775317/… 这对您有帮助吗？这就是我在 IE11 中遇到对齐问题时通常会做的事情。使用 % 作为父容器并使其灵活，或者我将不可见的 spacer-divs 放在内容区域上方和之外以手动调整站点上的对齐方式

标签： html css flexbox internet-explorer-11

【解决方案1】：

这是 IE 的known issue。在 IE 中与 Flexbox 布局一起使用时，min-height 属性将不起作用。我们可以在 IE 中使用 css-tricks 来修复它。在 Flexbox 布局中给父级一个 flex 列容器。

Flexbox 布局中父级的 CSS：

display: flex;
flex-direction: column;

在您的代码中，您应该更改 .popup-wrapper 样式，如下所示：

.popup-wrapper {
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    display: flex;
 }

在 IE 11 中的结果：

【讨论】：

这适用于小型弹出窗口，但如果内容增加，弹出窗口顶部会被剪切
如果内容比较长，可以直接使用原代码，在 IE 和其他浏览器中的结果是一样的。您应该根据内容长度选择要使用的代码。