使用滤镜设置透明导致 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 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
详解javascript new的运行机制
Jan 26 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
js模块加载方式浅析
Aug 12 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
React列表栏及购物车组件使用详解
Jun 28 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
MySQL数据源表结构图示
2008/06/05 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
启动targetcli时遇到错误解决办法
2017/10/26 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
巴基斯坦购物网站:Goto
2019/03/11 全球购物
extern是什么意思
2016/03/10 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
中央空调节能方案
2014/06/15 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
班级文化标语
2014/06/23 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
反腐倡廉观后感
2015/06/08 职场文书
董事长年会致辞
2015/07/29 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python