min-height/min-width no respeta caja de tamaño en algunos navegadores

ver este ejemplo: http://jsfiddle.net/vrgT3/5/min-height/min-width no respeta caja de tamaño en algunos navegadores

Hice un div 250x250px padre con overflow: auto; así aparecen barras de desplazamiento cuando el contenido desborda la caja. He establecido un fondo azul para que quede claro cuando el padre está visible.

Dentro del elemento primario se encuentra un elemento secundario con fondo rojo para la visibilidad. Tiene 8px bordes negros y box-sizing: border-box; para que el relleno y los bordes se incluyan al calcular el tamaño de la caja. El div infantil se establece en min-height: 100% y min-width: 100%.

Resultado esperado: La div secundaria debe ser del mismo tamaño que la principal, por lo que no se muestra azul y no aparecen barras de desplazamiento. El tamaño de la caja calculada (contenido + relleno + bordes) debe ser 250x250px. Debería haber 8px bordes negros incrustándolo, dejando una región roja 234x234px.

trabaja con:

Midori 4.1 Ubuntu
Cromo 16 Ubuntu
Opera 11.61 Ubuntu

Problemas con:

IE 8 WinXP: aparecen las barras de desplazamiento horizontales y verticales. El contenido es 249x266px con 8px bordes que dan un tamaño de caja calculado de 265x282px.
Firefox 3.6 WinXP: aparece la barra de desplazamiento vertical. El contenido es 217x250px y el tamaño de la caja calculada es 233x266px.
Firefox 10 Ubuntu: aparece la barra de desplazamiento vertical, el contenido es 221x250px, el tamaño de la caja es 237x266px.

He comprobado caniuse.com y parece que al menos los navegadores en cuestión apoyan la requerida min-height, min-width, y box-sizing. ¿Lo que da?

Solución: Como sugirió Marat, se trata de un error del navegador. Resolví una solución alternativa que utiliza JavaScript para agregar relleno/márgenes para corregir las diferencias en offsetWidth/Height. Véalo aquí: http://jsfiddle.net/vrgT3/8/

Fuente

2012-02-29 kueblc

IE8 ha tenido problemas conocidos desde hace mucho tiempo con ancho/alto mínimo/máximo y desbordamiento; el tamaño de la caja no es relevante. En cuanto a los demás ... – BoltClock

¡Gracias por la respuesta rápida! He intentado eliminar la propiedad 'overflow' (volviendo así a' overflow: visible') y sigo obteniendo tamaños incorrectos tanto en IE como en FF.El propósito de 'box-sizing' es incluir los bordes grandes en' min- *: 100% '. Esto funciona como se esperaba con Midori, Opera y Chromium. – kueblc

Vea también http://css-tricks.com/box-sizing/ (sección "Min/Max" debajo de la sección "Soporte") –

Este es un desafortunado error de Firefox (vea bug 308801) e IE8 (IE9 funciona correctamente).

El error se corrigió en Firefox 17+.

Fuente

2012-03-01 12:01:51

Ah, así es. Pero en serio, estamos en Firefox 10 con errores de casi 7 años. ¿Alguna solución provisional conocida? – kueblc

Solución alternativa es usar envoltura adicional. Y luego configure 'border' y' padding' para child block sin 'min-height', y establezca' min-height' para el bloque padre del bloque secundario. –

Por cierto, si el error es importante para usted, considere votar para su corrección en la página del error. Cuantos más votos tenga el error, más posibilidades habrá de solucionarlo pronto. Por ejemplo, para el error [401322] (https://bugzilla.mozilla.org/show_bug.cgi?id=401322), fue suficiente tener 96 votos para que el error tenga una alta prioridad para él, y se ha corregido bastante rápido (~ 3,5 meses después de informar). –

min-height/min-width no respeta caja de tamaño en algunos navegadores

Respuesta

Cuestiones relacionadas