搜索:
首页 >> 网页设计 >> CSS/HTML >> IE8 在元素尺寸大于(2048px/4096px)时 alpha滤镜渲染失败

IE8 在元素尺寸大于(2048px/4096px)时 alpha滤镜渲染失败

2010-1-5 作者:yemoo 来源:yemoo博客 投递文章

自动上次ymPrompt组件发布,自己就曾发现在IE8下遮罩的半透明滤镜有时无效的问题,后来也有网友提出过这个问题,但自己一直也没有太多关注,以为是IE8的安全策略问题,因此我一直都认为IE8可能默认不支持alpha透明滤镜了。曾经心里还一直纳闷:这MS是在搞什么呢,自动的东西都搞得这么不统一。

对此问题,我一直都认为没有很好的解决办法,唯一有效的办法就是采用IE7兼容模式来编写页面,即在页面中增加

<meta http-equiv="X-UA-Compatible" content="IE=7" />

,但这对于专门为ie8编写的页面来说是个比较不靠谱的方法。

近段时间在抽时间准备编写下一版本的ymPrompt,因此下载了一些时下流行的弹出组件,看看其实现和演示,一次测试中,无意发现某个组件的弹出遮罩在IE8下是半透明的,当时就立即查看源码,但奇怪的是没有发现那个兼容IE7的代码存在,难道这里还有什么高招或者玄机?我把组件里的那行半透明的html取出来,和自己组件中的代码对比,但没有发现什么差别,然后就对比CSS属性,一个个测试,最后发现,当把高度改为和我Demo中遮罩高度一致时,半透明就失效了!到这里基本知道,IE8应该是元素达到某个界限值后滤镜无效了。

在本人笔记本(ATI显卡+WIN7+IE8)上多次测试,发现当遮罩的高度或者宽度大于4096时,透明滤镜就失效了~ 这个数字在计算机还是比较有特殊意义的:2的N(N=12)次方。接下来开始在google寻找一些相关的资料,虽然资料很少,还是找到了一些相关的内容,如filter-alpha-opacity fails if the element is taller than 2048px, IE7 VistaIE8/Vista - Opacity not honored on large elements这两篇文章。从文章来看,好像这个尺寸并不是固定的4096,这个尺寸貌似跟显卡有关,有些显卡在尺寸大于2048时alpha就失效了。

Satyen Desai总结了这么一段话:

It fails precisely when the height of the element crosses 2048 (for a laptop with ATI card X), or 4096 (for a desktop with ATI card Y) based on some
testing I asked a user to try.

到这里,问题原因基本算清楚了:IE8 Alpha滤镜渲染机制有些问题,在应用Alpha滤镜的元素的宽或高大于某个值时(如4096/2048)时,该滤镜就失效了

尽管搞清楚了原因,并不是ie8不支持alpha,或者并不是安全策略问题,而是ie8的bug。但是还是有些小郁闷,既然之前浏览器版本能很好支持Alpha,为什么到ie8就出问题了呢??

发现了问题,后面就是想办法解决这个问题,除了之前所讲的IE7兼容模式的办法,我暂时只有两个WS的办法:(1)对非IE6统一采用透明PNG来做半透明。(2)ie8下对超出特定高度的部分重新创建一个遮罩层(这带来了维护遮罩层的复杂度)。

如果哪位老大有更好的办法,欢迎指点与我,在此先多谢了~

Tags:ymPrompt  ie8  alpha  滤镜 
相关文章