展会信息港展会大全

css ie滤镜png图片不兼容ie6/ie7/ie8解决办法
来源:互联网   发布日期:2016-03-25 16:31:26   浏览:2313次  

导读:首先我们选择一幅带有半透明点的png图片,页面的背景色是#660,观察在ie6/7/8下的表现。因为ie6不支持半透明点,所以就变成了灰色<style>body {background...

首先我们选择一幅带有半透明点的png图片,页面的背景色是#660,观察在ie6/7/8下的表现。因为ie6不支持半透明点,所以就变成了灰色

<style>

body {background: #660}

div

{

position:absolute;

filter: alpha(opacity=20);

width: 256px;

height: 256px;

}

img

{

position:absolute;

}

</style>

<div>

<img src="alpha.png" />

</div>

这次在ie8里出现了一个很诡异的现象:img元素没有被应用上滤镜!原因就是其设置了position:absolute。如果去掉这句,就和ie7表现一样。由此可见ie8还有这样一个bug:滤镜不会应用到绝对定位的子元素上!不过在加了<meta http-equiv="x-ua-compatible" content="ie=emulateie7" />兼容模式就没问题了。

<style>

body{background: #660}

.out

{

filter: alpha(opacity=20);

width: 256px;

height: 256px;

}

.in

{

filter: progid:dximagetransform.microsoft.alphaimageloader(src='alpha.png');

width: 256px;

height: 256px;

}

</style>

<div class="out">

<div class="in"></div>

</div>

经过一番测试,div嵌套img仍然行不通。我们不妨用div嵌套div,而且不用background加载图片。如果你记性好的话,应该知道ie有个alphaimageloader的滤镜,我们试着用它加载png: 这回可总算对了!不仅在ie7,ie8下正确显示,连咱们的老祖宗ie6都通了。大功告成!

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港