请参阅此示例:
http://jsfiddle.net/vrgT3/5/
我用overflow:auto制作了一个250x250px的父div.因此当内容溢出框时会出现滚动条.我已设置蓝色背景,以便在父级可见时清除它.
在父母内部是一个儿童div,红色背景可见.它有8px黑色边框和盒子大小:边框;所以填充和边框都包含在计算盒子的大小.子div设置为min-height:100%,min-width:100%.
预期结果:子div应与父级完全相同,因此不显示蓝色且不显示滚动条.计算的框大小(内容填充边框)应为250x250px.应该有8px黑色边框镶嵌这个,留下234x234px的红色区域.
适用于:
> Midori 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,看来至少有问题的浏览器支持所需的最小高度,最小宽度和盒子大小.是什么赋予了?
解决方案:正如Marat所说,这确实是一个浏览器错误.我已经解决了使用JavaScript添加填充/边距以纠正offsetWidth / Height差异的解决方法.在此处查看:http://jsfiddle.net/vrgT3/8/