有没有办法检测浏览器是否有子像素精度？ [英] Is there a way to detect if the browser has subpixel precision?
问题描述
有没有办法检测浏览器是否有元素的子像素精度？
IE9与其他主流浏览器不同，它的元素有亚像素精度一个方法是使用jQuery来检测浏览器名称和版本，一个元素的宽度可以是50.25px），因此，我需要以不同的方式对待一个东西。
<但是这在jQuery中已被弃用，不推荐使用，而是建议不应该测试浏览器的名称和版本是否存在特性。
我不知道你在哪里得到的想法，IE9是唯一支持分数像素单位的浏览器，但这个假设是完全不正确的。
从< a href =http://www.w3.org/TR/CSS2/syndata.html#values>规范的第4.3节（增加了强调）：
长度值的格式（在本说明书中由< length>表示）是< number> （带或不带小数点）后跟一个单元标识符（例如， px ，em等）。
并定义< number> ：
< blockquote>
一些值类型可以具有整数值（由< integer>表示）或实数值（由< number>表示）。实数和整数仅以十进制表示法指定。 < integer>由一个或多个数字0至9组成。 A数。可以是< integer> ;,或者它可以是零个或多个数字，后面跟着一个或多个数字的点（。）。整数和实数都可以在前面加上 - 或+来表示符号。
因此，根据规范， px 长度单位必须支持小数。
要证明这一点，请查看。
var el = $ #b'）[0]; //实际的DOM元素
var height = parseFloat（getComputedStyle（el）.height）; // => 5.5
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.
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
这篇关于有没有办法检测浏览器是否有子像素精度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
