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

影响版本 该bug影响：IE8、IE7、IE6 表现 用’filter’方法修正了PNG透明度之后链接上背景图像的透明部分不能点击。 教程时间 2009.7.19 星期天 15:03:44

描述

问题：我们用透明PNG图片作为链接的背景并用filter方法解决了IE下的alpha透明度问题。结果IE又怎么了？图像的透明部分变得不能点击了。让我们来看看例子。 Demo 由于这个bug的天然特性，示例在一个独立的页面 HTML代码

1. <div><a href="#">Lorem Ipsum</a></div>

CSS代码

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

条件注释代码

1. <!--[if IE]>
2.     <style type="text/css">
3.         a {
4.             background: none;
5.             cursor: pointer;
6.             filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ring.png",sizingMethod="scale");
7.         }
8.     </style>
9. <![endif]-->

我们这里有什么呢？一个应用了display:block的链接（<a>），其background设置一个PNG格式的黑圆圈图像， 除了黑圆圈之外的部分都为透明的。我们用只适合IE的filter属性来修复IE重色的PNG透明部分。问题在于？IE当中圆圈的透明部分不可点击。 解决方法 以下是以类型安排的解决上述bug的方法。   解决方法（Javascript方法）   解决日期 2009．07.19 15:17:23 解决浏览器版本 所有受影响的版本 描述 我来告诉你一个小秘密吧：如果我们给我们的链接设置background的话这个bug就修复了…不过等一下，我们能这么干吗？我们先来看一下我们的示例。 由于这个bug的天然特性，示例在一个独立的页面上。 HTML代码

1. <div><a href="#">Lorem Ipsum</a></div>

CSS Code

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

条件注释

1. <!--[if IE]>
2.     <style type="text/css">
3.         a {
4.             background: url(#); /* 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.     </style>
9. <![endif]-->

嘿嘿开挂啦！我们在IE中将background设置为一个“图像”，不过图像的url()仅仅只是一个#号。更新：看到有用户评论说用 about:blank怎么样。这里实际上就是将background的url()设置为当前页面上——没错，这样会产生额外的HTTP请求，不过我觉得 这不值得担心，因为那时候页面已经缓存好了。IE的行为总是变幻莫测，这就是其中一个例子。 更新：就像一位评论者所指出的一样。这个额外的HTTP请求可能会影响页面的点击率等问题。如果你担心这个问题的话，你可以把 background链接的#号替换为你的CSS文件（这个文件也是被缓存的），如果觉得这还不够彻底的话，建立一个透明GIF文件并把背景设为它。再补 充说明一下，如果这个解决方法只在条件注释里面实施的话，那个额外的请求只会在IE浏览器里面发生。 原文链接：http://haslayout.net/css/No-Transparency-Click-Bug

标签： 网页前端