Question

我在IE9布局渲染中遇到了一个非常具体的错误，当调整内部内容的大小时，错误地计算了box-sizing: border-box和min-height的div的高度。< / p>

给出以下标记和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在300px高度（内部高度为278px）时适当渲染。当新内容通过JavaScript注入div.content时，div.constrained容器增长到322px高度，就像不再应用大小调整大小一样。

只有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似乎已经自行解决了这个问题 - 我无法在那里重现问题。