判定浏览器是否支持原生透明
2010-05-16 02:49
344 查看
原生透明判定是浏览器特征侦探的重要一环,之后的许多特效就靠它选择是原生透明还是滤镜透明。自从IE9决定支持原生透明后,此判定复杂多了,jQuery对于它的判定隐含深意。下面是jQuery1.42的代码:
先不提IE8,IE7,IE6它们,肯定返回false。jQuery它为何选择如此特别的一个数字作为透明度呢?原先在jQuery1.32中,opacity是设为.5的,但发现firefox会错误地返回"0,5","0.5"不等于"0,5",因此出错。而为何使用正则表达式,我想这应该另有考量,但jQuery的类库作者们通常很少泄漏这些天机。
原因可能大部分来自新出的IE9技术预览版,由于缺少测试平台,下面的结论都是来自外国的:
IE之外的标准浏览器的opacity的类型为String,这是正确的,因为DOM的特性都该如此。
IE8等版本的opacity的类型是不确定,由代入值的类型确定,换言之,el.style.opacity = "0.5",那么类型为String,如果el.style.opacity = 0.5 ,那么类型为Number。
IE9最新预览版的opacity的类型为Number。
当el.style.cssText = "opacity:.25"之时,IE8直接返回 ".25" ,而IE9pp2返回0.25。
最后赠送一个重要的信息:
0.25转换为二进制时非无限循环小数,因此在各平如一致,其他符合此条件的数值也可行。但像0.5,它在Opera9.2x中就会判定失败,因为会返回“0.50”。
因此我的判定如下:
div.innerHTML = " <a href='/a' style='float:left;opacity:.25;'>a</a>"; // Make sure that element opacity exists // (IE uses filter instead) // Use a regex to work around a WebKit issue. See #5145 // http://dev.jquery.com/ticket/5145 opacity: /^0.55$/.test( a.style.opacity ),
先不提IE8,IE7,IE6它们,肯定返回false。jQuery它为何选择如此特别的一个数字作为透明度呢?原先在jQuery1.32中,opacity是设为.5的,但发现firefox会错误地返回"0,5","0.5"不等于"0,5",因此出错。而为何使用正则表达式,我想这应该另有考量,但jQuery的类库作者们通常很少泄漏这些天机。
原因可能大部分来自新出的IE9技术预览版,由于缺少测试平台,下面的结论都是来自外国的:
IE之外的标准浏览器的opacity的类型为String,这是正确的,因为DOM的特性都该如此。
IE8等版本的opacity的类型是不确定,由代入值的类型确定,换言之,el.style.opacity = "0.5",那么类型为String,如果el.style.opacity = 0.5 ,那么类型为Number。
IE9最新预览版的opacity的类型为Number。
当el.style.cssText = "opacity:.25"之时,IE8直接返回 ".25" ,而IE9pp2返回0.25。
最后赠送一个重要的信息:
0.25转换为二进制时非无限循环小数,因此在各平如一致,其他符合此条件的数值也可行。但像0.5,它在Opera9.2x中就会判定失败,因为会返回“0.50”。
因此我的判定如下:
div.innerHTML = " <a href='/a' style='float:left;opacity:.25;'>a</a>"; //IE8返回 ".25" ,IE9pp2返回0.25,chrome等返回"0.25" w3cOpacity: a.style.opacity == "0.25",
相关文章推荐
- 判定浏览器是否支持JS脚本和比是否比IE6更的高版本
- 原生JavaScript判断浏览器对CSS属性是否支持
- 原生JS ajax 判定浏览器是否关闭
- 原生JS ajax 判定浏览器是否关闭
- 检测浏览器是否支持querySelectorA…
- 解析IE, FireFox, Opera 浏览器支持Alpha透明的方法
- 判断浏览器是否支持JavaScript的方法
- [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
- 使用docement.createElement()来测试浏览器是否支持某元素
- 判断当前浏览器是否支持HTML5的日期控件
- Android原生浏览器不支持`
- 判断浏览器是否支持某个css3属性的javascript方法
- 判断浏览器是否支持javascript脚本语言及处理方法
- 浏览器是否支持webp图片 JavaScript
- HTML5 Canvas: 测试浏览器是否支持Canvas
- 判断浏览器是否支持Websocket
- javascript/js 检测浏览器类型和版本,检查浏览器是否支持flash,检查flash版本一站搞定~
- JavaScript 判断浏览器是否支持SVG的代码
- web开发之浏览器(二)----JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型
- 判断浏览器是否支持wml