¿El ancho del elemento DOM puede ser no entero?

Tengo una página cuyos elementos div están alineados por JavaScript. El JavaScript sólo echa un conjunto de elementos div para encontrar el máximo offsetWidth, a continuación, establecer todos los elementos div ancho para ser el máximo offsetWidth. Funciona perfecto en la mayoría de los navegadores y locales, pero falla en francés-francés en Firefox en Mac. En este caso, el contenido de div se envuelve.¿El ancho del elemento DOM puede ser no entero?

<div id="divFoo"> 
    Heure de d&#233;but : 
</div>

para HTML de arriba, debajo del informe de código "79".

javascript:alert(document.getElementById('divFoo').offsetWidth);

pero debajo el informe de código "79.1333px".

javascript:alert(window.getComputedStyle(document.getElementById('divFoo'),null).width))

La brecha entre 79,1333 y 79 hace incorrecto anchura conjunto de estilo en línea.

Solía pensaban que offsetWidth y anchura siempre debe ser un número entero. ¿Hay alguna manera de hacer offsetWidth redondo correctamente?

Fuente

2009-03-12 Morgan Cheng

Existe una diferencia entre la regla de estilo CSS (getComputedStyle() o de Renzo Kooi) y el ancho calculado en píxeles determinado por el agente de usuario.

Esto se debe en parte al hecho de que los valores de píxeles parciales son posibles en CSS, pero el agente de usuario debe elegir cómo mostrar píxeles parciales (actualmente, creo que redondean hacia arriba o hacia abajo, pero son muy inconsistentes, especialmente traducir porcentajes a píxeles [ver here]).

Es importante que existan estas diferencias, especialmente cuando los agentes de usuario implementan el zoom de página completa.

Por ejemplo, he hecho un caso de prueba con 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>Fractional pixels</title> 
    <style type="text/css" media="screen"> 
     #fractional { 
      width: 17.5px; 
      height: 16.1333px; 
      background: red; 
     } 
    </style> 
</head> 
<body> 
    <div id="fractional"></div> 
</body> 
</html>

Zoomed en un solo paso en Safari 4 Beta, la anchura CSS se informa como 17.5px y la 16.1333px altura. Pero su offsetWidth es de 21 píxeles de dispositivo, y su offsetHeight es de 19 píxeles de dispositivo.

La moraleja de la historia, en resumen, es que si desea hacer coincidir las dimensiones reales de un elemento, lo mejor es usar sus valores CSS como están, incluso si no son enteros.

Fuente

2009-03-12 06:43:40 eyelidlessness

¿El ancho del elemento DOM puede ser no entero?

Respuesta

Cuestiones relacionadas