我遇到了IE9布局渲染中一个非常具体的错误，其中当调整内部内容的大小时，带有box-sizing: border-box和a的div的高度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，就好像不再应用box-sizing一样。
JSFiddle演示：http : //jsfiddle.net/eafztwb2/16/
这只发生的溢出值auto，visible或scroll。将overflow-xto设置为hiddenor inherit（只要继承不会最终评估为前者之一）就不会显示问题。
这不是共享知识的问题，但我对仍可解决此问题的解决方案感兴趣overflow-x: auto。
这确实看起来确实像是布局错误，但是幸运的是，解决方法非常简单。将以及height应用于元素min-height。例如：
.constrained {
height: 100%;
min-height: 300px;
}
此问题也存在于Internet Explorer 10中。此解决方案适用于IE 9和IE10。InternetExplorer 11似乎已经单独解决了该问题-我无法在此处解决该问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句