El ancho del elemento DOM puede ser no entero?

StackOverflow https://stackoverflow.com/questions/637358

Pregunta

Tengo una página cuyos elementos div están alineados por JavaScript. El JavaScript simplemente verifica un conjunto de elementos div para encontrar el máximo offsetWidth , luego establece todos los elementos div 'width ser el máximo offsetWidth . Funciona perfecto en la mayoría de los navegadores y locales, pero falla en francés-Francia en Firefox en Mac. En este caso, el contenido de las envolturas div. 

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

para HTML anterior, informe de código inferior "79 " ;. 

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

pero debajo del informe de código " 79.1333px " ;. 

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

La brecha entre 79.1333 y 79 hace que el width incorrecto se configure en estilo en línea.

Solía ??pensar que offsetWidth y width siempre deberían ser enteros. ¿Hay alguna forma de hacer que offsetWidth se redondee correctamente?

¿Fue útil?

Solución

Hay una diferencia entre la regla de estilo CSS (que getComputedStyle () o Renzo Kooi getStyle () le dará) y el ancho real calculado en píxeles según lo 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 representar los píxeles parciales (actualmente, creo que todos se redondean hacia arriba o hacia abajo, pero son muy inconsistentes, particularmente al traducir porcentajes a píxeles [consulte aquí ]).

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

Por ejemplo, hice 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>

Zoom en un paso en Safari 4 Beta, el ancho de CSS se informa como 17.5px y la altura 16.1333px. Pero su offsetWidth tiene 21 píxeles de dispositivo y su offsetHeight tiene 19 píxeles de dispositivo.

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top