html - 最大高度和溢出不在 ie9 上滚动

Question

我在 ie9 上遇到一个非常奇怪的问题，其中具有最大高度(使用 calc() 和 vh 设置)和溢出自动的 div 不滚动。

您可以通过单击此图像查看发生了什么(如果此处未加载 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/

Answer 1

当组合 position: fixed 和 transform: translate 时，这似乎是一个重绘问题。

这里有 2 个可能的修复方法:

• 将溢出属性设置为滚动。即，overflow-y:scroll
• -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";

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

如果这些都不行，您可以放弃 transform: translate 并使用例如 display: table 将其居中。