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

时间:2012-02-29 23:22:21

标签: html css3 overflow css

请参阅此示例: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红色区域。

适用于:

  • Midori 4.1 Ubuntu
  • Chromium 16 Ubuntu
  • Opera 11.61 Ubuntu

问题:

  • IE 8 WinXP:出现水平和垂直滚动条。内容为249x266px8px边框的计算框尺寸为265x282px

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

  • Firefox 10 Ubuntu:显示垂直滚动条,内容为221x250px,计算框大小为237x266px

我检查过caniuse.com,看来至少有问题的浏览器支持所需的min-heightmin-widthbox-sizing。是什么给了什么?

解决方案:正如Marat所说,这确实是一个浏览器错误。我已经解决了使用JavaScript添加填充/边距以纠正offsetWidth / Height差异的解决方法。请在此处查看:http://jsfiddle.net/vrgT3/8/

1 个答案:

答案 0 :(得分:8)

这是Firefox的不幸错误(参见bug 308801)和IE8(IE9正常工作)。

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