ie css bug系列：链接图像透明部分不可点击 -亚博电竞官方网址

共计 1825 个字符，预计需要花费 5 分钟才能阅读完成。

影响版本

该 bug 影响：ie8、ie7、ie6

表现

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

教程时间

2009.7.19 星期天 15:03:44

描述

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

demo

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

html 代码

1. lorem ipsum

css 代码

1. a {
2.     display: block;
3.     background:  no-repeat;
4.     width: 100px; height: 100px;
5.     text-indent: -999px;
6. }

条件注释代码

2.     
3.         a {
4.             background: none;
5.             cursor: pointer;
6.             filter: progid:dximagetransform.microsoft.alphaimageloader(src=”ring.png”,sizingmethod=”scale”);
7.         }
8.     

我们这里有什么呢？一个应用了 display:block 的链接（

css code

1. a {
2.     display: block;
3.     background:  no-repeat;
4.     width: 100px; height: 100px;
5.     text-indent: -999px;
6. }

条件注释

2.     
3.         a {
4.             background: ; /* or point to a transparent gif. edit: see comments */
5.             cursor: pointer;
6.             filter: progid:dximagetransform.microsoft.alphaimageloader(src=”ring.png”,sizingmethod=”scale”);
7.         }
8.     

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

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

原文链接：