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

Question

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

与任何其他主流浏览器不同,IE9的元素具有亚像素精度(元素宽度可以是50.25px),因此,我需要以不同的方式处理事物.

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

Answer 1

我不确定你认为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