min-height / min-width no respeta el tamaño de las cajas en algunos navegadores

Ver este ejemplo:http: //jsfiddle.net/vrgT3/5

Hice una250x250px parent div conoverflow: auto; para que las barras de desplazamiento aparezcan cuando el contenido desborde el cuadro. He establecido un fondo azul para que quede claro cuando el padre está visible.

Dentro del padre es un niño div con fondo rojo para mayor visibilidad. Tiene8px bordes negros ybox-sizing: border-box; para que el relleno y los bordes se incluyan en el cálculo del tamaño de la caja. El div hijo se establece enmin-height: 100% ymin-width: 100%.

Resultado Esperado Child div debe ser exactamente del mismo tamaño que el padre, por lo que no se muestra azul ni aparecen barras de desplazamiento. El tamaño del cuadro calculado (contenido + relleno + bordes) debe ser250x250px. Debería haber8px bordes negros incrustando esto, dejando un234x234px región roja.

Funciona con

Midori 4.1 UbuntuChromium 16 UbuntuOpera 11.61 Ubuntu

Problemas con:

IE 8 WinXP: aparecen barras de desplazamiento horizontales y verticales. El contenido es249x266px con8px bordes que dan un tamaño de caja calculado de265x282px.

Firefox 3.6 WinXP: aparece la barra de desplazamiento vertical. El contenido es217x250px y el tamaño de la caja calculada es233x266px.

Firefox 10 Ubuntu: aparece la barra de desplazamiento vertical, el contenido es221x250px, el tamaño de la caja calculada es237x266px.

He comprobado caniuse.com y parece que al menos los navegadores en cuestión admiten la @ requerimin-height, min-width ybox-sizing. ¿Lo que da

Solución Como sugirió Marat, este es un error del navegador. He resuelto una solución alternativa utilizando JavaScript para agregar relleno / márgenes para corregir las diferencias en offsetWidth / Height. Véalo aquí:http: //jsfiddle.net/vrgT3/8

Respuestas a la pregunta(2)

Su respuesta a la pregunta