html透明像素点击无效

影响版本

该bug影响：IE8、IE7、IE6

表现

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

教程时间

2009.7.19 星期天 15:03:44

描述

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

Demo

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

HTML代码

Lorem Ipsum

CSS代码

a {

display:block

background:url(ring.png)no-repeat

width:100pxheight:100px

text-indent:-999px

}

条件注释代码

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

1.当加了doctype

<img />标签的alt属性在ie8或以上不生效，所以推荐使用title属性。

2.什么情况下使用id选择器或class选择器

id选择器复用性比较低，优先级比较高，唯一使用，所以如果某个样式

只是给某一个html元素使用，则选择id选择器，如果一个样式可能给多个

html元素使用，则应当使用class选择器。

3.a:link 在ie5,6下无效

可以直接使用a{...}

4.IETest工具，也有一个兼容性问题，在win7下，打不开ie6。可以下载绿色版的ie6,不用安装直接用的那种。

5.在嵌套div中，如果外层div没有设置边框，内层div的margin-top会无效。

那是因为你res后面多了一个括号。

修改前：

$.get('t.php', '', function(res)){

修改后：

$.get('t.php', '', function(res){

建议学会使用F12，也就是浏览器调试。错误信息会很详细的，比如多了个括号或者少了个引号啥的，基本都能清楚的显示，一看便知，比直接肉眼查bug好多了。

---