IE8 在元素尺寸大于(2048px/4096px)时 alpha滤镜渲染失败
作者:yemoo 来源:yemoo博客 发布时间:2010-01-05 16:39:00
自动上次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 Vista和IE8/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下对超出特定高度的部分重新创建一个遮罩层(这带来了维护遮罩层的复杂度)。
如果哪位老大有更好的办法,欢迎指点与我,在此先多谢了~
猜你喜欢
- 作者:JavaScript Kit译者:子乌(Sheneyan)翻译日期:2006-02-12英文原文:Conditional Compil
- 模仿IE自动完成功能,支持Firefox.支持方向键操作运行代码框<!DOCTYPE HTML PUBLIC "-//W3C
- 呵呵,我之前也写过一个类似的模板替换功能.>> 已实现:>、<、>=、<=、=、==等简单的运算>
- 从技术上来说,在ASP环境中,读入并管理XML文本的主要方法有三种: 创建MSXML对象,并且将XML文档载入DOM; 使用服务器端嵌入(S
- 我是这样来做DIV布局代码的.不知道说的清楚不清楚,凑和看吧我把class分为2种,布局class,风格class,布局class是骨架,风
- [参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ][操作系统:Windows]
- 科学设计你的网站网页:来自 Eye-Tracking研究的23节必修课 ——Christina Laun在网络设计领域关于Eye-
- 代码如下:DECLARE @c INT DECLARE @c2 INT SELECT @c = COUNT(1) FROM dbo.Spli
- 我们在浏览网页的时候偶尔会遇到一些陌生的网页交互行为,通常情况下它们并不会影响你的正常使用,之所以出现情况往往是因为,设计师在设计某个交互方
- 停止mysql服务(以管理员身份,在cmd命令行下运行) net stop mysql或者在服务中停止mysql服务。使用 mysqld –
- 平常我们使用js代码获取的时间都是客户端的时间,那么有什么办法在浏览器中显示的是服务器断的时间吗?请看下面代码:<span id=&q
- 在现代LOGO设计当中,叶子的形状被视做好的创意。或者说,是一种变革的想法。在网页中他们大多被用于轻量级的解决方案、干净的不抽像的设计。在实
- 引伸阅读解读absolute与relativeposition:relative/absolute无法冲破的等级定位一直是WEB标准应用中的
- 图片外框特征参数: ①dashed:虚线②dotted:点虚线③solid:实线④double:双线⑤groove:沟
- 当地址栏没有参数"id"时: 代码如下:Request.QueryString["ID"] == n
- <script>function getJsFile(url, callBack){
- 介绍:细处着手,巧处用功。高手和菜鸟之间的差别就是:高手什么都知道,菜鸟知道一些。电脑小技巧收集最新奇招高招,让你轻松踏上高手之路。 摘要
- 今天在这里,不以设计师的身份,而从一个普通用户的角度和各位聊聊设计中蕴含的那份情感,关于情感再产品设计中的意义,聊聊设计中的那份源于“心”的
- 很久之前就对jQuery.animate的实现非常感兴趣,不过前段时间很忙,直到前几天端午假期才有时间去研究。jQuery.animate的
- 写程序的人在编写由asp页面生成静态页面html的时候,如果同时生成大量页面,一定遇到过浏览器下方的进度条上显示着3%,6%,10%等缓慢增