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

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

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

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

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

Работает с:

  • Midori 4.1 Ubuntu
  • Хром 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 и выяснилось, что, по крайней мере, рассматриваемые браузеры поддерживают требуемую min-height , min-width и box-sizing . Что дает?

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

Это неудачная ошибка Firefox (см. Ошибку 308801 ) и IE8 (IE9 работает правильно).

Исправлена ​​ошибка в Firefox 17+.