无为清净楼资源网

使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
网络编程 2024/11/18 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com
如下
复制代码 代码如下:
<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)后的分号。

标签：
滤镜设置,透明
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接