min-height / min-width не учитывает размер окна в некоторых браузерах

См. Этот пример: http://jsfiddle.net/vrgT3/5/

Я создал родительский div 250x250px с overflow: auto; , поэтому полосы прокрутки появляются, когда содержимое выходит за пределы поля. Я установил синий фон, чтобы было видно, когда родитель виден.

Внутри родительского элемента находится дочерний блок div с красным фоном для видимости. Он имеет 8 пикселей черных границ и box-sizing: border-box; , поэтому отступы и границы включены в вычисление размера поля. Для дочернего div задано значение min-height: 100% и min-width: 100% .

Ожидаемый результат: Дочерний div должен иметь тот же размер, что и родительский, поэтому синий цвет не отображается и полосы прокрутки не отображаются. Расчетный размер блока (содержимое + отступ + границы) должен быть 250x250 пикселей . Там должны быть 8px черные границы, оставляя красную область 234x234px .

Работает с:

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

Проблемы с:

• IE 8 WinXP: появляются горизонтальные и вертикальные полосы прокрутки. Контент имеет размер 249x266px с границами 8px , что дает вычисленный размер блока 265x282px .

• Firefox 3.6 WinXP: появляется вертикальная полоса прокрутки.Контент составляет 217x250 пикселей , а рассчитанный размер блока составляет 233x266 пикселей .

• Firefox 10 Ubuntu: появляется вертикальная полоса прокрутки, содержимое составляет 221x250 пикселей , вычисленный размер окна составляет 237x266 пикселей .

Я проверил caniuse.com и выяснил, что, по крайней мере, рассматриваемые браузеры поддерживают требуемую минимальную высоту , минимальную ширину и размер окна . Что дает?

Решение: Как предположил Марат, это действительно ошибка браузера. Я нашел обходной путь с использованием JavaScript для добавления отступов / полей для исправления различий в offsetWidth / Height. См. Здесь: http://jsfiddle.net/vrgT3/8/