No es ninguna noticia que en CSS, incluso en navegadores que cumplen la mayoría de los estándares, no funcione todo como nos esperamos y haya que recurrir a trucos, que además la mayoría de las veces parecen de lo más irracionales.
Vía un
artículo de script&style me entero de un hack útil que no conocía: fijar el ancho mínimo del elemento body. Hice la prueba únicamente en FF3 (firefox 3) y funciona.
Problema:Si tenemos una imagen de fondo de, supongamos, ~2000 px, centrada dentro del elemento body, al redimensionar estrechando la ventana del navegador, el elemento body tambien se estrechará redimensionando su imagen de fondo, con lo que es posible que por debajo de un ancho determinado se desencaje el diseño. Nos gustaría fijar un ancho mínimo, por debajo del cual el elemento body no siga estrechándose. Si probamos a asignar únicamente la regla min-width al elemento body, ésta parece no aplicarse.
// sin el hack, la imagen seguirá redimensionándose por debajo de ese ancho
body{min-width:958px;}
El hack:Para que la regla min-width surta efecto, es necesario añadir (no me preguntéis porque, pero funciona) una regla color, asignando el valor a, por ejemplo, blanco, al elemento html.
html{color: #000;} // sin esto el min-width del body no funciona
body{min-width:958px;}
