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

J'ai une page dont les éléments div sont alignés par JavaScript. Le JavaScript vérifier juste un ensemble d'éléments div pour trouver le maximum offsetWidth, puis définissez tous les éléments div de largeur pour être au maximum offsetWidth. Il fonctionne parfaitement dans la plupart des navigateurs et des locales, mais il échoue sur français-France dans Firefox sur Mac. Dans ce cas, le contenu de div wraps.La largeur de l'élément DOM peut être non entière?

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

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

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

mais sous le code "79.1333px".

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

L'écart entre 79,1333 et 79 rend la largeur incorrecte ensemble de style en ligne.

je pensais que pour offsetWidth et largeur doit toujours être un entier. Y at-il un moyen de faire offsetWidth rond correctement?

Source

2009-03-12 Morgan Cheng

Il existe une différence entre la règle de style CSS (que getComputedStyle() ou getStyle() de Renzo Kooi vous donnera) et la largeur calculée en pixels telle que déterminée par l'agent utilisateur. Ceci est en partie dû au fait que des valeurs de pixels partielles sont possibles en CSS, mais l'agent utilisateur doit choisir comment rendre les pixels partiels (actuellement, je crois qu'ils sont tous arrondis, mais très incohérents, en particulier quand traduire des pourcentages en pixels [voir here]).

Il est important que ces différences existent, en particulier lorsque les agents utilisateurs implémentent un zoom de page complet.

Par exemple, je fait un 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>

zoomée en une seule étape dans Safari 4 Beta, la largeur CSS est rapportée comme 17.5px et la 16.1333px de hauteur. Mais son offsetWidth est 21 pixels de l'appareil, et son offsetHeight est de 19 pixels de l'appareil. En résumé, la morale de l'histoire est que si vous voulez 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 des nombres entiers.

Source

2009-03-12 06:43:40 eyelidlessness

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

Répondre

Questions connexes