2011-04-07 6 views
20

Duplicar posible:
Evenly distributed height of child elements with CSS¿Adónde van los píxeles perdidos en un diseño de porcentaje de CSS?

Digamos que tengo un diseño con 6 DIV que son flotador izquierda con una anchura de 16,666%. El tamaño del documento se divide en 6 partes.

Ahora, si tengo un tamaño de documento de digamos 620px de ancho, esto haría que cada parte 103.333px. Como no conozco pantallas que puedan mostrar píxeles parciales :) Me pregunto cómo maneja el navegador los píxeles parciales.

Aquí es mi caso de prueba: http://jsfiddle.net/dhQh2/ (Sólo redimensionar la ventana para obtener un resultado)

Al cambiar el tamaño costuras que los 6 DIV mantienen el mismo tamaño. Pero en algunos casos no puede ser. ¿Cómo maneja el navegador esos valores parciales de PX?

+0

Me gustaría ver la respuesta a esta :) – Pieter888

+0

+1. y para puntos de bonificación, ¿cómo se tienen en cuenta los píxeles utilizados por un borde de 1px que es (fuera del modelo de caja, por lo que esos píxeles se agregan al tamaño total de la casilla) – Spudley

+3

Es lo mismo que esto: http: // stackoverflow. com/questions/5115637/evenly-distributed-height-of-child-elements-with-css Esta pregunta se ha formulado varias veces antes. Los diferentes navegadores manejan el redondeo de manera diferente.Esa pregunta que he vinculado tiene enlaces relevantes en los comentarios. – thirtydot

Respuesta

10

Si, por ejemplo, usa un ancho de %, y el ancho exacto debe ser 103.333px, el navegador debe tomar una decisión sobre cómo mostrar eso.

diferentes navegadores decisiones diferentes, leer estos enlaces para más información:

me gusta especialmente esta explicación de John Resig/David Baron de por qué esto es aún un problema:

Estaba t alking de esto con algunos desarrolladores de Mozilla y David Baron explicó la situación bastante bien:

Estamos tratando de conocer a un montón de limitaciones que no pueden ser todos satisfechos al mismo tiempo (la prueba se deja como un ejercicio para el lector, pesar de que en realidad podría haber escrito a cabo una vez en un comentario Bugzilla):

  1. 4 objetos adyacentes de anchura/altura 25% (por ejemplo) a partir de una edg e de un contenedor debe terminar exactamente en en el otro extremo; nunca debería haber un píxel adicional en el recipiente y nunca deben ser envueltos debido a ser un píxel de ancho

  2. objetos que son lógicamente adyacente siempre debe tocar visualmente; hay nunca debe haber un espacio de píxeles o un píxel de solapamiento debido a error de redondeo

  3. objetos dada la misma anchura debe ocupar el mismo número de píxeles

  4. bordes de los objetos deben siempre (visualmente) ser alias a un límite píxel específico en la pantalla (que nunca deben ser borrosas)

el uno [Mozilla] sacrificios es típicamente (3), excepto para las fronteras donde sacrificamos (1) al redondear el ancho a los límites de píxeles mucho anterior.

Ver esta pregunta para un JavaScript fijar que las fuerzas de la consistencia:

Evenly distributed height of child elements with CSS

Otra cuestión relevante:

Are the decimal places in a CSS width respected?

2
+0

esto responde parcialmente a mi pregunta. ¿Qué sucede cuando se usa todo el ancho? El navegador necesita hacer algo para que los div llenen todo el espacio ... Pero no puedo entender qué sucede con el enlace que has publicado. ¿Me he perdido algo? – meo

6

Van en el cielo de los píxeles;)

Sólo bromeando. Lo más probable es que diferentes navegadores lo manejen de diferentes maneras.

El primer enfoque que tengo en mente es calcular el ancho de cada área. Luego, redondearlo al int más cercano. El resto de los píxeles se quedan vacíos.

Otro enfoque, podría estar llenando la última área, cualquiera que sea el ancho (con un pequeño margen de errores).

Pregunta muy interesante: podría ser bueno tener el control sobre este comportamiento con CSS de hecho.

+5

Esto realmente tiene sentido. Me refiero a la parte sobre Pixelheaven. – Pieter888

1

Firefox 4:

el div en torno a estos divs 6 tiene un borde. Cuando lentamente cambia el tamaño de toda la ventana, ve que el borde "salta". Esto significa que todos los divs tienen el mismo ancho, pero la suma es menos/más del 100%. Cuando cambia el tamaño solo del píxel div que contiene divi, puede ver que no todos los divs cambian el ancho simultáneamente.

1

Dependiendo de qué navegador esté utilizando cambia lo que sucede. Algunos navegadores pueden redondear el valor. Algunos lo obligan a redondear (math.ceil en algunos lenguajes) y algunos redondean hacia abajo o "truncan". Por ejemplo, Google Chrome trunca los decimales.

Usted puede probar fácilmente los efectos de esta por medio de imaginología de impresión y, posteriormente, comprobar el tamaño en un editor de pintura (pintura, paint.net, Adobe Photoshop, etc.)

pregunta muy interesante, sin embargo :)

Cuestiones relacionadas