IE CSS Bug系列:链接图像透明部分不可点击

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。这篇由伯乐在线前端开发小组的@daozen 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

【提示】:IE CSS BUG 系列译文正在进行中,后续或有改动和调整,请不要转载本系列的译文

—————————————————————————–

影响版本

该bug影响:IE8、IE7、IE6

表现

用’filter’方法修正了PNG透明度之后链接上背景图像的透明部分不能点击。

教程时间

2009.7.19 星期天 15:03:44

描述

问题:我们用透明PNG图片作为链接的背景并用filter方法解决了IE下的alpha透明度问题。结果IE又怎么了?图像的透明部分变得不能点击了。让我们来看看例子。

 

Demo

由于这个bug的天然特性,示例在一个独立的页面

HTML代码

CSS代码

条件注释代码

我们这里有什么呢?一个应用了display:block的链接(<a>),其background设置一个PNG格式的黑圆圈图像,除了黑圆圈之外的部分都为透明的。我们用只适合IE的filter属性来修复IE重色的PNG透明部分。问题在于?IE当中圆圈的透明部分不可点击。

 

解决方法

以下是以类型安排的解决上述bug的方法。

解决方法(Javascript方法)

解决日期

2009.07.19 15:17:23

解决浏览器版本

所有受影响的版本

描述

我来告诉你一个小秘密吧:如果我们给我们的链接设置background的话这个bug就修复了…不过等一下,我们能这么干吗?我们先来看一下我们的示例。

由于这个bug的天然特性,示例在一个独立的页面上。

 

HTML代码

CSS Code

条件注释

嘿嘿开挂啦!我们在IE中将background设置为一个“图像”,不过图像的url()仅仅只是一个#号。更新:看到有用户评论说用about:blank怎么样。这里实际上就是将background的url()设置为当前页面上——没错,这样会产生额外的HTTP请求,不过我觉得这不值得担心,因为那时候页面已经缓存好了。IE的行为总是变幻莫测,这就是其中一个例子。

更新:就像一位评论者所指出的一样。这个额外的HTTP请求可能会影响页面的点击率等问题。如果你担心这个问题的话,你可以把background链接的#号替换为你的CSS文件(这个文件也是被缓存的),如果觉得这还不够彻底的话,建立一个透明GIF文件并把背景设为它。再补充说明一下,如果这个解决方法只在条件注释里面实施的话,那个额外的请求只会在IE浏览器里面发生。

收藏 评论

关于作者:道禅

当一切都看起来无济于事的时候,我去看一个石匠敲石头.他一连敲了一百次,石头仍然纹丝不动.但他敲第一百零一次的时候,石头裂为两半.可我知道,让石头裂开的不是那最后一击,而是前面的一百次敲击的结果。(新浪微博:@卍道禅卐) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部