43

ブラウザが要素のサブピクセル精度を持っているかどうかを検出する方法はありますか?

IE9 は、他の主要なブラウザーとは異なり、要素の精度がサブピクセル (要素の幅は 50.25 ピクセルになる可能性があります) であるため、別の方法で処理する必要があります。

1 つの方法は、jQuery を使用してブラウザーの名前とバージョンを検出することですが、これは jQuery では非推奨であり、推奨されません。代わりに、ブラウザーの名前とバージョンではなく、機能の存在をテストする必要があることが示唆されています。

4

4 に答える 4

33

分数ピクセル単位をサポートするブラウザは IE9 だけだという考えをどこから得たのかはわかりませんが、その仮定は完全に間違っています。

仕様のセクション 4.3から(強調を追加):

長さの値 (この仕様では <length> で示される) の形式は、<number> (小数点の有無にかかわらず) の直後に単位識別子 (たとえば、px、 em など) が続きます。

そして<number> を定義します:

一部の値型は、整数値 (<integer> で示される) または実数値 (<number> で示される) を持つ場合があります。実数および整数は、10 進数表記のみで指定します。<integer> は、「0」から「9」までの 1 つ以上の数字で構成されます。<number> は <integer> にするか、0 個以上の数字の後にドット (.) と 1 つ以上の数字を続けることができます。整数と実数の両方の前に「-」または「+」を付けて符号を示すことができます。-0 は 0 に相当し、負の数ではありません。

したがって、仕様ごとに、px長さの単位は小数をサポートする必要があります。

これを証明するには、このフィドルをフルスクリーンで見て、ブラウザのズーム機能を使用してズームインしてください。

フィドルのスクリーンショット

この Chrome のスクリーンショットでは、5.5 ピクセルの青いボックスが実際に 5 ピクセルの赤いボックスよりも高くなっていることに注意してください。

混乱は、非標準が計算された (丸められた) 整数element.clientHeight値を返すという事実と、丸めがブラウザによって異なるという事実に起因する可能性があると思います。

私のフィドルでclientHeightは、青の<div>場合、100％ズームのIE9とFirefox 15は6. Chrome 22 と Opera 12 は5. すべてのブラウザーで、ユーザーがブラウザーのズーム レベルを変更すると、そのプロパティの値が変化します。

というか、頼りない。

要素の実際の分数単位で計算したい場合は、 を使用しますgetComputedStyle。

var el = $('#b')[0]; // the actual DOM element
var height = parseFloat(getComputedStyle(el).height); // => 5.5
于 2012-09-26T15:41:32.527 に答える
2

http://jsfiddle.net/KAW3d/1/

  • IE6、IE7、および Opera 12.02 の場合: 100.5px + 100.5px = 200px (2 つの 100.5px フロートが 200px コンテナーに収まります)
  • IE8+、Firefox 15.0.1、Chrome 22: 100.5px + 100.5px > 200px
于 2012-10-03T13:36:15.160 に答える
2

奇数サイズのコンテナーを作成し、その中に幅 50% の要素を 2 つドロップして、それらが 50:50 に分割されているかどうかを調べることができます。

http://jsfiddle.net/alnitak/jzrQ6/を参照してください。

falseMacOS X 10.8.2 の Chrome 22.0.1229.79、およびtrueFirefox 15.0.1で戻ります。テストするMSIEがありません。

于 2012-09-26T15:14:57.737 に答える