min-height / min-width不尊重某些浏览器中的box-sizing

问题描述

查看此示例：

我使用 overflow：auto; 创建了一个 250x250px 父div，所以滚动条会在内容溢出箱子。

父项内部是一个带有红色背景的子div，以便可见。它有 8px 黑色边框和 box-sizing：border-box; 的盒子。子div设置为 min-height：100％和 min-width：100％。

预期结果：子div应与父母完全相同，因此不会显示蓝色，也不会显示滚动条。计算的框大小（content + padding + border）应为 250x250像素。应该有 8px 黑色边框镶嵌，留下 234x234px 红色区域。

使用：

• Midori 4.1 Ubuntu


• Chromium 16 Ubuntu


• Opera 11.61 Ubuntu

strong>

• IE 8 WinXP：出现水平和垂直滚动条。内容为 249x266px 和 8px 边框，计算框大小为 265x282px 。




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




• Firefox 10 Ubuntu：出现垂直滚动条，内容为 221x250px ，计算框大小为 237x266px 。 / p>

我已检查caniuse.com，似乎至少有问题的浏览器支持所需的 min-height ， min-width 和 box-sizing 。

正如Marat所说，这确实是一个浏览器错误。我已经解决了一个解决方法，使用JavaScript添加填充/边距来纠正offsetWidth / Height的差异。请参阅：

解决方案

这是Firefox的错误（请参阅）和IE8（IE9正常工作）。

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

See this example: http://jsfiddle.net/vrgT3/5/

I made a 250x250px parent div with overflow: auto; so scrollbars appear when the content overflows the box. I have set a blue background to make it clear when the parent is visible.

Inside the parent is a child div with red background for visibility. It has 8px black borders and box-sizing: border-box; so padding and borders are included in computing the size of the box. The child div is set to min-height: 100% and min-width: 100%.

Expected result: Child div should be the exact same size as the parent, so no blue is shown and no scrollbars appear. The computed box size (content+padding+borders) should be 250x250px. There should be 8px black borders inlaying this, leaving a 234x234px red region.

Works with:

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

Issues with:

• IE 8 WinXP: Horizontal and vertical scrollbars appear. The content is 249x266px with 8px borders giving a computed box size of 265x282px.

• Firefox 3.6 WinXP: Vertical scrollbar appears. The content is 217x250px and computed box size is 233x266px.

• Firefox 10 Ubuntu: Vertical scrollbar appears, content is 221x250px, computed box size is 237x266px.

I have checked caniuse.com and it appears that at least the browsers in question support the required min-height, min-width, and box-sizing. What gives?

Solution: As Marat suggested, this is indeed a browser bug. I've resolved a workaround utilizing JavaScript to add padding/margins to correct for differences in offsetWidth/Height. See it here: http://jsfiddle.net/vrgT3/8/

解决方案

This is unfortunate bug of Firefox (see bug 308801) and IE8 (IE9 works correctly).

The bug is fixed in Firefox 17+.

这篇关于min-height / min-width不尊重某些浏览器中的box-sizing的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！