使用滤镜设置透明导致 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实现的网页颜色代码表全集
Jul 17 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
vue实现多级菜单效果
Oct 19 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 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 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
JavaScript实现修改伪类样式
2017/11/27 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python属于解释型语言么
2020/06/15 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
企业内部培训方案
2014/02/04 职场文书
初中同学聚会感言
2014/02/11 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
医院病假条怎么写
2015/08/17 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python