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

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

影响版本

该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.     displayblock
  3.     backgroundurl(ring.png) no-repeat
  4.     width100pxheight100px
  5.     text-indent-999px

条件注释代码

  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; 

条件注释

  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

责任编辑:陈四芳 来源: 伯乐在线
相关推荐

2013-10-31 10:59:23

IECSS

2013-10-31 11:12:56

IECSS

2013-10-30 09:57:43

IECSS

2013-09-09 10:51:07

CSSIE浏览器

2013-10-28 14:01:03

IECSS

2013-10-29 10:32:59

IECSS

2009-08-13 10:12:07

IE的CSS Bug

2010-08-19 13:54:51

FirefoxIECSS

2010-08-17 15:38:49

CSS兼容IE7IE8

2010-09-03 09:55:10

CSS伪类hover

2022-06-16 09:55:58

css轮播图

2020-07-06 08:37:18

前端

2010-07-16 11:42:23

SQL Server

2010-09-14 09:18:28

DIVCSS

2010-08-18 10:24:51

IE6IE7IE8

2010-09-15 10:14:19

IE7IE8兼容CSS

2010-08-19 14:09:47

IE7IE8

2023-08-01 08:18:09

CSSUnset

2010-09-06 15:06:29

IE6IE7Firefox

2010-09-08 16:59:48

CSS兼容IE7IE8
点赞
收藏

51CTO技术栈公众号