使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法


Posted in Javascript onApril 07, 2011

如下

<div style="width:100px;height:100px;background:gold"></div>

用IE开发者工具,或IE8自带的开发者工具。结构如 图1 :

使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法

红色所圈之处可以看到给div添加的内联样式width,height,background都依次排列。正常!

但给该div添加filter:alpha(opacity=20)后,

<div style="filter:alpha(opacity=20);width:100px;height:100px;background:gold"> 
</div>

情况发生了变化,如 图2 :

使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法

红色所圈之处看到,width和filter挤在一行上了。正常的情况width应该另起一行。
有人也许会说这只是开发者工具没有正确显示,只要不影响页面元素正确渲染即可。
的确,在IE6/7/8/9 中该元素宽度、高度、背景色及透明度都能按设置所期望的渲染,显示。如图:

使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法

此外,将样式写在style标签内或css文件中也会出现以上现象。

再看下JS设置filter,情况稍有不同。代码如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>IE 6/7/8/9 中JS设置filter</title> 
</head> 
<body> 
<div id="d1" style="width:100px;height:100px;background:gold"></div> 
<script type="text/javascript"> 
var d1 = document.getElementById('d1'); 
d1.style.filter = 'alpha(opacity=20)'; 
</script> 
</body> 
</html>

IE中查看结构,效果如 图2 ,即filter和width在一行。

注意以上html中的最后一句js代码

d1.style.filter = 'alpha(opacity=20)';

右小括号后没有加分号。现在该句稍改下(的确是稍改,只加了个分号)
d1.style.filter = 'alpha(opacity=20);';

即在由小括号后加了个 分号 ";" 。 这时查看IE开发者工具如 图3 :

使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法

红色所圈之处看到四个css属性background、filter、height和width单独在一行显示。而没有像 图2 中filter和width在一行显示。

PS:很多流行JS库设置透明的方法没有加 alpha(opacity=20)后的分号。

Javascript 相关文章推荐
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
js给table赋值的实例代码
Oct 13 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 #Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 #Javascript
我的javascript 函数链之演变
Apr 07 #Javascript
JavaScript中链式调用之研习
Apr 07 #Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 #Javascript
javascript 单例/单体模式(Singleton)
Apr 07 #Javascript
Safari5中alert的无限循环BUG
Apr 07 #Javascript
You might like
用ODBC的分页显示
2006/10/09 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
JS长整型精度问题实例分析
2015/01/13 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
利用python画出AUC曲线的实例
2020/02/28 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
竞选劳动委员演讲稿
2014/04/28 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
道德模范事迹材料
2014/12/20 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
2015中学教学工作总结
2015/07/22 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python