La largeur de l'élément DOM peut être non-entière?

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

Question

J'ai quelques pages dont les éléments div sont alignés par JavaScript. JavaScript suffit de vérifier un ensemble d’éléments div pour trouver le offsetWidth maximum, puis définir tous les éléments div ' width . être le offsetWidth maximum. Cela fonctionne parfaitement dans la plupart des navigateurs et locales, mais il échoue sur la France française dans Firefox sur Mac. Dans ce cas, le contenu de div wraps. 

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

pour HTML ci-dessus, sous le rapport de code "79". 

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

mais sous le rapport de code "79.1333px". 

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

L'écart entre 79.1333 et 79 rend le largeur incorrect le style en ligne.

J'avais l'habitude de penser que offsetWidth et largeur devraient toujours être des nombres entiers. Existe-t-il un moyen de contourner offsetWidth correctement?

Était-ce utile?

La solution

Il existe une différence entre la règle de style CSS (que getComputedStyle () et le getStyle () de Renzo Kooi vous donnera) et la largeur réelle calculée en pixels, telle que déterminée par l'agent utilisateur.

Cela est dû en partie au fait que des valeurs partielles de pixels sont possibles en CSS, mais que l'agent utilisateur doit choisir le rendu des pixels partiels (actuellement, je pense qu'ils sont tous arrondis, mais très incohérents, en particulier lors de la traduction. pourcentages en pixels [voir ici ]).

Il est important que ces différences existent, en particulier dans la mesure où les agents utilisateurs implémentent le zoom de page entière.

Par exemple, j'ai créé un scénario de test avec ceci: 

<!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>

Effectué un zoom avant dans Safari 4 Beta, la largeur CSS est indiquée à 17,5 pixels et la hauteur 16,1333 pixels. Mais son offsetWidth est de 21 pixels de périphérique et son offsetHeight est de 19 pixels de périphérique.

La morale de l'histoire, en résumé, est que si vous souhaitez faire correspondre les dimensions réelles d'un élément, il est préférable d'utiliser ses valeurs CSS telles quelles, même si elles ne sont pas entières.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top