使用滤镜设置透明导致 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 相关文章推荐
js实现图片拖动改变顺序附图
May 13 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
node.js文件上传处理示例
Oct 27 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
express异步函数异常捕获示例详解
Nov 30 Javascript
用React Native制作一个简单的游戏引擎
May 27 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
php cli模式下获取参数的方法
2017/05/05 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
Underscore源码分析
2015/12/30 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
js实现时钟定时器
2020/03/26 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python使用urlparse分析网址中域名的方法
2015/04/15 Python
深入学习python的yield和generator
2016/03/10 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
python脚本定时发送邮件
2020/12/22 Python
初中教师业务学习材料
2014/05/12 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
2014年业务工作总结
2014/11/17 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
政审证明材料
2015/06/19 职场文书
小学生读书笔记范文
2015/06/30 职场文书