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

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

与其他主stream浏览器不同的是，IE9对其元素具有子像素精度（元素宽度可以是50.25px），因此，我需要以不同的方式处理事物。

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

Answer 1

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

从规范4.3节 （强调增加）：

长度值的格式（在本说明书中用<长度>表示）是一个<number> （有或没有小数点）紧跟一个单位标识符（例如， px ，em等）。

并定义<number> ：

某些值types可能具有整数值（由<integer>表示）或实数值（由<number>表示）。 实数和整数只能用十进制表示。 一个<整数>由一个或多个数字“0”到“9”组成。 一个<number>既可以是一个<integer>，也可以是零个或多个数字，后跟一个点（。），后跟一个或多个数字。 整数和实数都可以用“ – ”或“+”来表示符号。 -0相当于0，不是负数。

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

为了certificate这一点，请全屏观看此小提琴 ，并使用浏览器的缩放function进行缩放：

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

---

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

在我的小提琴中，对于蓝色<div> ，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 

Answer 2

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

见http://jsfiddle.net/alnitak/jzrQ6/

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

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> 200px

Answer 4

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

 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中做同样的事情，但我没有testing它。

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