有没有办法检测浏览器是否具有子像素精度？(Is there a way to detect if the browser has subpixel precision?)

有没有办法检测浏览器是否具有子像素精度？(Is there a way to detect if the browser has subpixel precision?)

有没有办法检测浏览器是否具有元素的子像素精度？

IE9与其他主流浏览器不同，它的元素具有子像素精度（元素宽度可以为50.25px），因此我需要对待一个不同的东西。

一种方法是使用jQuery来检测浏览器的名称和版本，但是这在jQuery中是不推荐使用的，不推荐使用，而是建议测试功能的存在而不是浏览器的名称和版本。

Is there a way to detect if the browser has subpixel precision for elements ?

IE9, unlike any of the other major browsers, has subpixel precision for its elements (an elements width can be 50.25px) and because of that, I need to treat a thing differently.

One way is to use jQuery to detect the browser name and version, but this is deprecated in jQuery and not recommended, instead being suggested that the existence of features should be tested for not the browsers names and versions.

最满意答案

我不知道你是否认为IE9是唯一支持分数像素单位的浏览器，但是这个假设是完全不正确的。

从规范的第4.3节 （强调添加）：

长度值的格式（在本说明书中由<length>表示）是紧随其后的单元标识符（例如， px ，em等）的<number> （带或不带小数点）。

并定义<number> ：

某些值类型可能具有整数值（由<integer>表示）或实数值（由<number>表示）。 实数和整数仅以十进制格式表示。 一个<integer>由一个或多个数字“0”到“9”组成。 一个<number>可以是一个<integer>，或者可以是零个或多个数字，后跟一个点（。），后跟一个或多个数字。 两个整数和实数之前可能有一个“ - ”或“+”表示符号。 -0等于0，不是负数。

因此，根据规格， px长度单位必须支持分数。

为了证明这一点，请在全屏中查看这个小提琴 ，并使用浏览器的缩放功能缩放所有方法：

在这个Chrome屏幕截图中，请注意，5.5px蓝框确实比5px红色框高。

---

我认为混淆可能来自于非标准的 element.clientHeight返回一个计算的（四舍五入） 整数值，并且在不同浏览器中的舍入会发生不同的事实。

在我的小提琴中，对于蓝色<div>的clientHeight ，IE9和Firefox 15在100％缩放时可以提供6 。 Chrome 22和Opera 12提供5 。 在所有浏览器中，该属性的值随用户更改浏览器的缩放级别而改变。

换句话说，这是不可靠的。

如果要使用元素的实际分数单位进行计算，请使用getComputedStyle 。

var el = $('#b')[0]; // the actual DOM element var height = parseFloat(getComputedStyle(el).height); // => 5.5

I'm not sure where you got the idea that IE9 is the only browser that supports fractional pixel units, but that assumption is totally incorrect.

From section 4.3 of the spec (emphasis added):

The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.).

And defining <number>:

Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and is not a negative number.

Therefore, per spec, the px length unit must support fractional numbers.

To prove this, take a look at this fiddle in fullscreen and use your browser's zoom function to zoom all the way in:

In this Chrome screenshot, notice that the 5.5px blue box is indeed taller than the 5px red box.

---

I think the confusion might stem from the fact that the non-standard element.clientHeight returns a calculated (rounded) integer value, and that rounding happens differently in different browsers.

In my fiddle, for the clientHeight of the blue <div>, IE9 and Firefox 15 at 100% zoom give 6. Chrome 22 and Opera 12 give 5. In all browsers, the value of that property changes as the user changes the browser's zoom level.

In other words, it's unreliable.

If you want to do calculations with the actual, fractional units of an element, use getComputedStyle.

var el = $('#b')[0]; // the actual DOM element var height = parseFloat(getComputedStyle(el).height); // => 5.5