IE11 - 對齊項目不適用於彈出窗口

Question

我有一個彈出窗口，我試圖在頁面中垂直對齊，我使用 flex (align-items) 來執行此操作，但它不適用於 IE11。 經過一些研究，我發現 IE11 中存在一個錯誤，其中 align-items 不適用於 min-height。 我已經嘗試了一些給出的解決方案，但似乎沒有任何效果。

我嘗試了什么：

1. 用彈出式內部包裝器上的高度替換最小高度
2. 保持最小高度並增加1px的高度

Output：

1. 正確居中所有內容（chrome 和 IE），但僅在內容很少時。 如果您在示例中添加更多文本，您將看到彈出窗口的頂部被剪切
2. 發生與 1 相同的事情

這里的代碼示例

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

Answer 1

這是 IE 的一個已知問題。 在 IE 中與 Flexbox 布局一起使用時， min-height屬性將不起作用。 我們可以在 IE 中使用 css-tricks 來修復它。 在 Flexbox 布局中給父級一個彈性列容器。

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 中的結果：