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

Question

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

IE9与其他主流浏览器不同，它的元素具有亚像素精度（元素宽度可以是50.25px），因此，我需要以不同的方式对待它。

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

Answer 1

我不确定你认为IE9是唯一支持分数像素单元的浏览器，但这种假设是完全错误的。

来自section 4.3 of the spec（强调补充）：

  

长度值的格式（在本说明书中由＆lt; length＆gt;表示）是＆lt; number＆gt; （带或不带小数点），紧接着是单位标识符（例如， px ，em等）。

定义＆lt; number＆gt; ：

  

某些值类型可能具有整数值（由＆lt; integer＆gt;表示）或实数值（由＆lt; number＆gt;表示）。实数和整数仅以十进制表示法指定。 ＆lt;整数＆gt;由一个或多个数字“0”到“9”组成。 A＆lt; number＆gt;可以是＆lt; integer＆gt;，也可以是零个或多个数字后跟一个点（。）后跟一个或多个数字。整数和实数都可以在前面加上“ - ”或“+”来表示符号。 -0相当于0，不是负数。

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

要证明这一点，请查看this fiddle中的fullscreen并使用浏览器的缩放功能进行缩放：

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

---

我认为混淆可能源于非标准 element.clientHeight返回计算的（舍入的）整数值，并且舍入发生的不同在不同的浏览器中。

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

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

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

5

Answer 2

您可以创建一个奇数大小的容器并在其中放置两个50％宽度的元素，并找出它们是否已被分割为50:50。

请参阅http://jsfiddle.net/alnitak/jzrQ6/

它在MacOS X 10.8.2上的Chrome 22.0.1229.79上返回false，在Firefox 15.0.1上返回true。我没有MSIE来测试它。

Answer 3

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

• 在IE6，IE7和Opera 12.02中：100.5px + 100.5px = 200px（两个100.5px浮动适合200px容器）
• 在IE8 +，Firefox 15.0.1，Chrome 22：100.5px + 100.5px＆gt; 200像素

Answer 4

我们最近必须做一些严格的像素完美计算，我需要检查浏览器是否支持子像素布局。我使用其他一些答案作为指南创建了一个在Conditionizr或Modernizr中使用的测试：

conditionizr.add('subpixel-layout', function() {
    var $testWrap = $(
        '<div style="width: 4px; height: 2px; position: absolute; right: 0; bottom: 0;">' +
            '<div id="subpixel-layout-1" style="width: 2.5px; height: 1px; float: left;"></div>' +
            '<div id="subpixel-layout-2" style="width: 2.5px; height: 1px; float: left;"></div>' +
        '</div>'
    ).appendTo('body');

    var supported = $('#subpixel-layout-1').position().top !== $('#subpixel-layout-2').position().top;
    $testWrap.remove();
    return supported;
});

然后你可以使用：

conditionizr.on('!subpixel-layout', function () {
    // subpixel layout is NOT available
});

您应该能够使用Modernizr.addTest()在Modernizr中执行相同的操作，但我没有对其进行测试。

显然我在这里使用jQuery，但如果没有它也应该很简单。