html - 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 红色区域。

适用于:

• 绿 4.1 Ubuntu
• Chromium 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+ 中修复。