IE9 在 DOM 更新时错误计算了最小高度并设置了溢出

Question

我在 IE9 布局渲染中遇到了一个非常具体的错误，其中 div 与 box-sizing: border-box 和 min-height 的高度在内部内容已调整大小。

给定以下标记和 CSS：

<div class="constrained">
    <div class="content">Content</div>
</div>

* { box-sizing: border-box; }
.constrained {
    border: 1px solid blue;
    min-height: 300px;
    padding: 10px;
    overflow-x: auto;
}

当页面加载时，div.constrained 在 300 像素高度（278 像素内部高度）处适当呈现。当通过 JavaScript 将新内容注入 div.content 时，div.constrained 容器会增长到 322px 高度，就好像不再应用 box-sizing 一样。

这仅发生在溢出值 auto、visible 或 scroll 时。将 overflow-x 设置为 hidden 或 inherit（只要继承不会最终评估为前者之一）不会显示问题。

这与其说是知识共享的问题，不如说是一个问题，但我对解决这个问题的解决方案很感兴趣，同时仍然允许 overflow-x: auto。

Answer 1

这确实看起来像是布局错误，但幸运的是，解决方法非常简单。将 height 与 min-height 一起应用于您的元素。例如：

.constrained {
    height: 100%;
    min-height: 300px;
}

Internet Explorer 10 中也存在此问题。此解决方案适用于 IE 9 和 10。Internet Explorer 11 似乎已自行解决此问题 - 我无法在那里重现该问题。

IE9 miscalculates min-height on DOM update with overflow set