DOM要素の幅は整数ではありませんか？

div要素がJavaScriptによって整列されたページが1ページあります。 JavaScriptはちょうど、すべてのdiv要素幅がために最大offsetWidth設定し、最大offsetWidthを見つけるために、DIV要素のセットを確認してください。それはほとんどのブラウザとロケールで完璧に動作しますが、MacのFirefoxでフランス語フランスでは失敗します。この場合、divの内容は折り返されます。DOM要素の幅は整数ではありませんか？

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

上記のHTMLでは、コードレポート "79"の下にあります。

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

ですが、コードレポート "79.1333px"以下です。

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

79.1333と79の間のギャップは、インラインスタイルに間違った幅セットになります。

私はoffsetWidthと幅は常に整数であるべきと考えていました。何か方法がありますかoffsetWidthは正しく丸められますか？

出典

2009-03-12 Morgan Cheng

CSSスタイルルール（getComputedStyle()またはレンゾクーイのgetStyle()）と、ユーザーエージェントによって決定された実際の計算幅（ピクセル単位）が異なります。

これは、CSSでは部分的なピクセル値が可能ですが、ユーザーエージェントは部分的なピクセルのレンダリング方法を選択する必要があるためです（現時点では、これらはすべて上下されますが、パーセントをピクセルに変換する[here参照]）。

特に、ユーザーエージェントがフルページズームを実装する場合、これらの違いが存在することが重要です。例えば

私はこれをテストケースを作った：サファリ4ベータの一の工程ズームイン

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

、CSS幅を17.5pxと高さ16.1333pxとして報告されます。しかし、offsetWidthは21個のデバイスピクセルで、そのoffsetHeightは19個のデバイスピクセルです。

話の教訓は、要するに、あなたは要素の実際の寸法を一致させたい場合は、そのまま彼らは非整数であっても、そのCSS値を使用するのが最善だということです。

出典

2009-03-12 06:43:40 eyelidlessness

DOM要素の幅は整数ではありませんか？

答えて

関連する問題