max-height 和溢位不滾動 ie9

問題描述

我在 ie9 上有一個非常奇怪的問題，其中一個帶有 max-height(設定為 calc() 和 vh) 的 div 和 overflow auto 不滾動。

您可以透過點選此影像來看到發生的情況 (如果 GIF 未在此處載入)：

我的 HTML：

<div class="modal">
  <div class="modal__title">Modal Title</div>
  <div class="modal__body">
    <p>When I am too tall, I should scroll on ie9, but I don't.</p>
  </div>
  <div class="modal__footer">Footer here</div>
</div>

相關 CSS：

.modal {
  min-width: 500px;
  max-width: 800px;
  border-radius: 4px;
  max-height: 65vh;
  overflow: hidden;
  background-color: white;
  position: fixed;
  top: 15vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.modal__body {
    max-height: calc(65vh - 120px)); // 120 is the combined height of the header and footer
    overflow-y: auto;
}

我不明白為什麼會發生這種情況，因為 ie9 支援 vh， calc() 和 max-height 。有任何想法嗎？

JSFiddle 演示：https://jsfiddle.net/sbgg5bja/3/

最佳解決方案

當組合 position: fixed 和 transform: translate 時，這似乎是一個重印問題。

這裡有兩個可能的修復：

設定 overflow 屬性滾動。即，overflow-y:scroll
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";

Src：How to solve IE9 scrolling repaint issue with fixed-position parent that has -ms-transform:translate?

如果這兩個都沒有，您可以刪除 transform: translate 並使用例如 display: table 來使其居中。