2012-09-16 10 views
11

OK, he buscado a lo largo y ancho y se me ocurre nada más que evidencia anecdótica para sugerir que no se recomienda el comportamiento estándar en la especificación CSS para la precisión de los números de coma flotante.Lugares decimales en porcentaje CSS

N.B. No estoy preguntando sobre el well known sub-pixel rounding problem.

La razón por la que te pido es que IE parece redondear los valores de punto flotante basados ​​en porcentajes hasta 2 cifras decimales, mientras que WebKit y Gecko permiten al menos 3, o incluso más (no he probado).

Por ejemplo:

li { 
    width: 14.768%; 
} 

Cuando inspeccionó en Inspector Web de Chrome o Firebug, los <li> s se muestran correctamente para tener una anchura de 14,768%. Sin embargo, en las herramientas de desarrollo IE (modo IE9/8/7), tienen un ancho de 14.76%. Esto hace que los valores reales basados ​​en píxeles también se eliminen por completo.

¿Alguien puede arrojar algo de luz sobre este comportamiento o proporcionar una solución adecuada? Preferiría no tener que recurrir a valores basados ​​en píxeles si es posible, ya que el contenido debe ser de ancho fluido.

Sé que es bastante complicado lidiar con este número de decimales, pero me gustaría saber si alguno de estos buscadores es "correcto".

EDITAR

Firefox parece utilizar los valores porcentuales correctos cuando se muestra en el inspector (no redondeado a 2 decimales), pero está mostrando el mismo comportamiento que IE en términos de la colocación real de píxeles.

+3

¿Por qué necesita una precisión de tres decimales? –

+0

He escrito un complemento para un carrusel receptivo de ancho de fluido. Los anchos y las compensaciones se realizan dividiendo el número de elementos del carrusel entre el total, etc. Esto desafortunadamente puede terminar en un ancho de 3 decimales. :/ –

+1

Si encuentra que necesita 3 precisión decimal en CSS, está haciendo algo mal. – AntonNiklasson

Respuesta

4

Probablemente hay muchas soluciones para su problema, sugeriría siguientes:

  1. Ronda en 2 decimales por ti mismo para todos, excepto uno, que reducen de ancho total de último.
  2. Use table o display: table, que el navegador arreglará los anchos por sí mismo.
Cuestiones relacionadas