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

是否有方法检测浏览器是否具有元素的亚像素精度

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

---

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

您可以创建一个奇数大小的容器，并在其中放置两个50%宽度的元素，看看他们是不是各占一半

看

---

它在MacOS X 10.8.2上的Chrome 22.0.1229.79上返回

false

，在Firefox 15.0.1上返回

true

。我没有MSIE来测试它。

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

起自（加强调）：

长度值的格式（在本规范中以表示）是紧跟在单位标识符（例如，px、em等）后面的（带或不带小数点）

并定义：

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

因此，根据规范，

px

长度单位必须支持小数

为了证明这一点，请查看并使用浏览器的缩放功能一直放大：

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

---

我认为混淆可能源于以下事实：非标准的

元素.clientHeight

返回一个经过计算（取整）的整数值，取整在不同的浏览器中发生的情况不同

在我的小提琴中，对于蓝色

的

clientHeight，IE9和Firefox 15在100%缩放时给出
6
。Chrome 22和Opera 12提供
5
。在所有浏览器中，该属性的值都会随着用户更改浏览器的缩放级别而更改

换句话说，这是不可靠的

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



在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中
最近，我们不得不进行一些认真的像素完美计算，我需要检查浏览器是否支持亚像素布局。我创建了一个测试，用于或使用其他一些答案作为指导：

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;
});

使用
Modernizr.addTest（）
，您应该能够在Modernizr中执行相同的操作，但我没有测试它

显然，我在这里使用的是
jQuery
，但是没有它也应该很简单。
投票并加上星号，因为我一点也不知道子像素是如何工作的。你不能将div的样式设置为“50.5px”，然后在Javascript中检查它的宽度，onload，看看它是否四舍五入吗？有趣，据我所知，IE是最后一个实现亚像素精度的主流浏览器（或者我们谈论的是两件不同的事情；）。@Yoshi可能是为了其他原因，但对于元素的维度，所有其他主流浏览器都有整数值。$Yoshi不是指CSS值的getComputedStyle吗？无论如何，我认为这是一个更复杂的问题，考虑到浏览器内部查看值的方式、您关于显示的观点、josh在下面提到的规范以及用户看到的实际显示尺寸。我想还有更多的东西需要了解和探索。然而，事实仍然是IE9处理它的方式不同，但要正确理解它，还有更多的东西需要搜索。我在Firefox和IE10中得到了
true
。在Win 7In Chrome上，Chrome 22.0.1229.79 m在50%和149%之间的缩放级别上得到了false，在很多（但不是全部）上得到了true缩放超出该范围的级别。@josh3736有趣的发现！-在IE6和IE7 100.5px+100.5px=200px（两个100.5px浮点数放入200px容器）中，在IE8+100.5px+100.5px>200px中，我与Yoshi进行了更长时间的讨论，但在您的示例中，如果您使用开发人员工具查看Properties-htmldevelment-clientWidth中元素的客户端设置，它将显示整数值。你知道为什么吗？是在所有浏览器中始终返回整数值（换句话说，四舍五入）的非标准属性。在中，请注意，
clientHeight
的值随着浏览器缩放级别的改变而波动。问题的核心是IE9和其他浏览器处理显示的方式不同，特别是在我的例子中，相同的布局在IE9中的显示与其他浏览器不同，我把这个问题归因于IE9处理亚像素精度的方式。从你的帖子以及与Yoshi的讨论中，我了解到这个问题有更多的内容，需要搜索和了解每个浏览器处理这个问题的不同之处。你的帖子在得出这个结论时提供了很多信息，也很有用，你的解决方案也很有用。
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
});