分の高さ/最小幅は、一部のブラウザで

Question

をボックスのサイズ変更を尊重していない

この例を参照してください：http://jsfiddle.net/vrgT3/5/

私は、コンテンツがボックスをオーバーフローときにスクロールバーが表示されoverflow: auto;で250x250px親のdivをしました。私は親が見えるときにそれを明確にするために青い背景を設定しました。

親の中には、赤い背景を持つ子divが表示されます。 8pxの黒い枠線とbox-sizing: border-box;を持つので、枠のサイズの計算にはパディングと枠線が含まれています。子divはmin-height: 100%とmin-width: 100%に設定されています。

期待される結果：子divは親と同じサイズでなければならないので、青は表示されず、スクロールバーも表示されません。計算されたボックスサイズ（コンテンツ+パディング+ボーダー）は250x250pxである必要があります。 8pxの黒い枠線がこれに内在し、234x234pxの赤い領域が残ります。

作品：

• みどり4.1 Ubuntuの
• クロム16 Ubuntuの
• オペラ11.61 Ubuntuの

問題と：

• 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を利用してpadding/marginsを追加し、offsetWidth/Heightの差を修正する回避策を解決しました。ここをクリックしてください：http://jsfiddle.net/vrgT3/8/

Answer 1

これはFirefox（bug 308801参照）とIE8（IE9は正常に動作します）の残念なことにバグです。

バグはFirefox 17+以降で修正されています。