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

前端之家收集整理的这篇文章主要介绍了html – min-height / min-width在某些浏览器中不考虑box-sizing前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
请参阅此示例: 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/

解决方法

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

错误已在Firefox 17中修复.

原文链接:https://www.f2er.com/html/231713.html

猜你在找的HTML相关文章