在某些浏览器中，min-height/min-width 不考虑 box-sizing

Question

请参阅此示例：http://jsfiddle.net/vrgT3/5/

我用overflow: auto; 制作了一个250x250px 父div，因此当内容溢出框时会出现滚动条。我设置了蓝色背景，以便在父级可见时清楚。

在父级内部是一个带有红色背景的子级 div 以提高可见性。它具有8px 黑色边框和box-sizing: border-box;，因此在计算框的大小时会包含填充和边框。子 div 设置为 min-height: 100% 和 min-width: 100%。

预期结果： 子 div 应该与父 div 的大小完全相同，因此不会显示蓝色，也不会出现滚动条。计算的框大小（内容+填充+边框）应为250x250px。应该有8px黑色边框嵌入这个，留下一个234x234px红色区域。

适用于：

• Midori 4.1 Ubuntu
• 铬 16 Ubuntu
• Opera 11.61 Ubuntu

问题：

• IE 8 WinXP：出现水平和垂直滚动条。内容为249x266px，带有8px 边框，计算出的框大小为265x282px。

• Firefox 3.6 WinXP：出现垂直滚动条。内容为217x250px，计算框大小为233x266px。

• Firefox 10 Ubuntu：出现垂直滚动条，内容为221x250px，计算框大小为237x266px。

我检查了 caniuse.com，似乎至少有问题的浏览器支持所需的min-height、min-width 和box-sizing。什么给了？

解决方案： 正如 Marat 所建议的，这确实是一个浏览器错误。我已经解决了一个使用 JavaScript 添加填充/边距以纠正 offsetWidth/Height 差异的解决方法。在这里看到它：http://jsfiddle.net/vrgT3/8/

Answer 1

这是 Firefox（参见 bug 308801）和 IE8（IE9 可以正常工作）的不幸错误。

该错误已在 Firefox 17+ 中修复。