请参阅此示例:http://jsfiddle.net/vrgT3/5/
我使用250x250px
创建了一个overflow: auto;
父div,因此当内容溢出框时会出现滚动条。我设置了蓝色背景,以便在父母可见时清楚显示。
父母内部是一个带有红色背景的儿童div,以提高知名度。它有8px
黑色边框和box-sizing: border-box;
,因此在计算框大小时会包含填充和边框。子div设置为min-height: 100%
和min-width: 100%
。
预期结果:子div应与父级完全相同,因此不会显示蓝色,也不会显示滚动条。计算的框大小(内容+填充+边框)应为250x250px
。应该有8px
个黑色边框,并留下234x234px
红色区域。
适用于:
问题:
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/