См. Этот пример: http://jsfiddle.net/vrgT3/5/
Я создал родительский div 250x250px с overflow: auto;, поэтому полосы прокрутки появляются, когда содержимое выходит за рамки поля.Я установил синий фон, чтобы было ясно, когда родитель виден.
Внутри родительского элемента находится дочерний элемент div с красным фоном для видимости.Он имеет 8px черных рамок и box-sizing: border-box;, поэтому отступы и границы включены в расчет размера поля.Дочерний элемент 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 и оказалось, что по крайней мере рассматриваемые браузеры поддерживают требуемые min-height, min-width и box-sizing.Что дает?
Решение: Как предположил Марат, это действительно ошибка браузера.Я решил обходной путь, используя JavaScript для добавления отступов / полей, чтобы исправить различия в offsetWidth / Height.Смотрите здесь: http://jsfiddle.net/vrgT3/8/