43

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

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

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

4

4 回答 4

33

我不知道你从哪里知道 IE9 是唯一支持小数像素单位的浏览器，但这种假设是完全不正确的。

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

长度值的格式（在本规范中用<length> 表示）是一个<number>（带或不带小数点），紧跟一个单位标识符（例如，px、em 等）。

并定义<number>：

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

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

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

小提琴截图

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

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

在我的小提琴中，对于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
于 2012-09-26T15:41:32.527 回答
2

您可以创建一个奇数大小的容器并在其中放入两个 50% 宽度的元素，然后查看它们是否已按 50:50 进行拆分。

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

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

于 2012-09-26T15:14:57.737 回答
2

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
于 2012-10-03T13:36:15.160 回答
0

最近我们不得不进行一些严格的像素完美计算，我需要检查浏览器是否会支持亚像素布局。我使用其他一些答案作为指南创建了一个用于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 中用 做同样的事情Modernizr.addTest()，但我没有测试它。

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

于 2015-01-20T18:46:24.473 回答