IE9使用溢出设置错误计算DOM更新的最小高度

Question

我在IE9布局渲染中遇到了一个非常具体的错误,其中调整内部内容大小时div box-sizing: border-box和a 的高度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像素高度(278px内高度)页面加载时呈现.当div.content通过JavaScript 注入新内容时,div.constrained容器增长到322px高度,就像不再应用框大小一样.

这只发生的溢出值auto,visible或scroll.设置overflow-xto hidden,或inherit(只要继承不会最终评估为前者之一)不会显示问题.

这不是一个问题,而是知识共享,但我对解决方案感兴趣,同时仍然允许overflow-x: auto.

Answer 1

这肯定看起来像布局错误,但幸运的是,解决方法非常简单.将a和a一起height应用于你的元素min-height.例如:

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

Internet Explorer 10中也存在此问题.这个解决方案适用于IE 9和10. Internet Explorer 11似乎已经解决了这个问题 - 我无法在那里重现问题.