Die Breite des DOM-Elements kann nicht ganzzahlig sein?

Ich habe eine Seite, deren div-Elemente durch JavaScript ausgerichtet sind. Die JavaScript-Check nur eine Reihe von div Elementen, die die max offset, dann setzen Sie alle div-Elemente Breite finden der max offset zu sein. Es funktioniert perfekt in den meisten Browsern und Locales, aber es schlägt auf Französisch-Frankreich in Firefox auf dem Mac. In diesem Fall wird der Inhalt von div umschlossen.Die Breite des DOM-Elements kann nicht ganzzahlig sein?

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

für obigen HTML, unter Code-Bericht "79".

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

aber unter Code-Bericht "79.1333px".

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

Die Lücke zwischen 79,1333 und 79 macht eine falsche Breite Set Inline-Stil.

ich früher dachte, dass offset und Breite immer integer sein sollte. Gibt es eine Möglichkeit, offsetWidth Runde richtig zu machen?

Quelle

2009-03-12 Morgan Cheng

Es gibt einen Unterschied zwischen der CSS-Stilregel (die getComputedStyle() oder Renzo Kooi getStyle() Ihnen geben wird) und der tatsächlichen berechneten Breite in Pixeln, wie vom Benutzeragenten bestimmt. Das liegt zum Teil daran, dass partielle Pixelwerte in CSS möglich sind, aber der User-Agent muss wählen, wie partielle Pixel gerendert werden sollen (derzeit glaube ich, dass sie alle auf- oder abrunden, aber besonders inkonsistent sind) Übersetzen von Prozenten in Pixel [siehe here]).

Es ist wichtig, dass diese Unterschiede bestehen, insbesondere, wenn Benutzeragenten das Ganzseiten-Zoomen implementieren.

Zum Beispiel habe ich einen Testfall mit diesem:

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

Gezoomte in einem Schritt in Safari 4 Beta, die CSS Breite als 17.5px gemeldet wird und die Höhe 16.1333px. Aber seine offsetWidth ist 21 Geräte Pixel, und seine offsetHeight ist 19 Geräte Pixel.

Die Moral der Geschichte, kurz gesagt, ist, dass, wenn Sie die tatsächlichen Dimensionen eines Elements anpassen möchten, ist es am besten, seine CSS-Werte zu verwenden, wie sie sind, auch wenn sie nicht ganzzahlig sind.

Quelle

2009-03-12 06:43:40 eyelidlessness

Die Breite des DOM-Elements kann nicht ganzzahlig sein?

Antwort

Verwandte Themen