allow css firefox zoom css-float wrapping

css - allow - Cómo evitar que el diseño flotante se ajuste cuando se reduce el zoom de Firefox



zoom css in firefox (9)

Dmitri,

Cuando el navegador calcula el nuevo ancho de sus divs después de hacer zoom, no tiene que reducir los dos elementos de borde 478px + 4px en proporción al solo 960px. Así que terminas con esto:

Tus estilos originales:

#wrap equals 960px wide #left & #right, plus border equals 960px wide

Todo encaja muy bien.

Zoom reducido (ctrl-)

#wrap equals (approx.) 872px wide. #left, #right, plus border eqauls 876px wide. (left and right reduce to approx 436px each, plus 4 px of border)

Los contenidos son demasiado amplios para #wrap. Para ver y medir esto, simplemente aplique un color de fondo a #wrap.

Para arreglarlo, elimine el ancho de #wrap. Debido a que está flotando, brillará para ajustarse a los contenidos. Sin embargo, debes aplicar un ancho a los elementos flotados y tu div {float: left} lo aplica a #wrap.

Elimine el estilo div {float: left} y agregue float: left a #left, #right.

#left, #right {float:left;width:478px;border:1px solid}

Si desea que #wrap esté centrado, entonces deberá declarar un ancho para él nuevamente y agregar un margen: 0 auto ;, en cuyo caso tendrá este problema nuevamente [edit: o puede, como lo indica chris, establecer el ancho al 100%]. Así que simplemente vuelva a calcular el ancho de #left, #right para que encajen.

Tengo entendido que dejar un poco de espacio de respiración entre el ancho de los elementos padre e hijo es bueno para evitar este tipo de problema de todos modos.

Dado el siguiente HTML. #left dos columnas: #left , #right . Ambos son de ancho fijo y tienen bordes de 1px. El ancho y los bordes son iguales al tamaño del contenedor superior: #wrap .

Cuando apago Firefox 3.5.2 presionando Ctrl + - las columnas se envuelven ( demo ).

¿Cómo prevenir esto?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> div {float:left} #wrap {width:960px} #left, #right {width:478px;border:1px solid} </style> </head> <body> <div id="wrap"> <div id="left"> left </div> <div id="right"> right </div> </div> </body> </html>

El problema es causado por el ancho de tu # envoltura.

He establecido el ancho al 100% y ya no se rompe en Firefox mientras se reduce con CTRL -.

Intente cambiar a un modelo de caja diferente de la siguiente manera:

#left, #right { width:480px; border:1px solid; box-sizing: border-box; /* and for older/other browsers: */ -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box }

La mejor solución para corregir errores flotantes en todos los casos es usar el diseño de la tabla usando tds. Eso nunca se perderá flotando.

No estoy seguro de entender completamente tu situación. Reducir el zoom debería, en efecto, alejar. ¿Estás diciendo que cuando alejas las columnas se envuelven?

Debes hacer flotar esos divs usando este código en tu CSS:

#container {width: 960px} #left {float: left} #right {float: right}

Si esto no funciona, puede intentar dejar un pequeño espacio entre las columnas ajustando el ancho para compensar algunas pequeñas discrepancias en el navegador.

EDITADO (ignorar arriba):

Viendo que me ha brindado más información, debo decirle que el navegador incorpora redondeo cuando se cambia el tamaño y tener este tamaño de píxel perfecto no es lo más inteligente que puede hacer.

En su lugar, puede tener un div tener un ancho absoluto y el otro para tener un ancho automático así:

#container {width: 960px;} #left {width: 478px;} #right {width: auto;}

Esto hará que el navegador ocupe tanto espacio para #right como sea posible dentro de #wrap div. Asegúrese de establecer un ancho para el ajuste, de lo contrario tomará el 100% de la ventana.

¡Espero que esto ayude!

EDITADO :

La derecha está muy cerca de su ancho fijo, porque ya definió el ancho de su contenedor, por lo que es simplemente el ancho del contenedor restado por el ancho del lado izquierdo. Esto es simplemente para asegurar que no haya discrepancia al cambiar el tamaño de la ventana.

Entiendo que no ocupará toda el área del espacio, sin embargo, a medida que se agrega el contenido, el máximo que se utilizará será el ancho del contenedor a la izquierda. ¿Estás tratando de aplicar un fondo? En ese caso, establezca el fondo del lado derecho como fondo del contenedor y luego el lado izquierdo como fondo del lado izquierdo (asegúrese de que cubra la mitad).

Espero haberte ayudado.

Ok, chicos, cuando tengan un div con altura fija, para evitar que el zoom rompa todo, agregue overflow:hidden a su css. Ese fue el truco para mí y ahora todos los navegadores pueden volverse locos. :)

Tuve un problema similar. Ajustando # bien a un margen negativo trabajado. Por ejemplo:

#right{ margin-right:-400px; }

Yo estaba luchando con este error también. Tuve una navegación con pestañas con anchos fijos en cada pestaña y un margen derecho que totaliza el ancho del contenedor div.

De hecho, descubrí una nueva solución, que parece funcionar muy bien. La navegación de la pestaña, por supuesto, está envuelta en una etiqueta ul. Establecí un ancho en esta etiqueta ul de aproximadamente 6px mayor que el contenedor div. Entonces, por ejemplo, el contenedor div tiene 952px de ancho, luego la etiqueta ul es de 958px de ancho. Como las etiquetas li en la navegación están flotando hacia la izquierda y tienen anchos fijos, no irán más allá de 952px, sin embargo, el elemento ul tiene algo de espacio para respirar, lo que parece ser necesario para aplastar este error. He intentado reducir el zoom en Firefox e IE7 / 8 y las pestañas permanecen en su lugar.

Espero que esto ayude a alguien a ahorrar unos minutos / horas!