IE6中a标签没法监听到点击事件的总结(转)

IE6中a标签无法监听到点击事件的总结(转)

IE6 这个必须死的浏览器实在是让人崩溃。。。对于a标签无法点击的bug遇到过N次也是一知半解的简单的添加背景图解决，这次正好在网上看到了一篇总结性的好文。搬过来~~

 

情况一

 

<!--这是 <a> 标签所在容器的背景上画了一个按钮，需要能点击跳转的情况-->
<a href="http://leyteris.iteye.com/" style="display:block;width:100px;height:40px;" >
</a>

由于 <a> 标签没有背景，在 IE6 下将不可点击，鼠标移上后也不会是手型。 

解决方案：给 <a> 标签增加一个透明的图片背景。 

 

情况二

 

<!--这是绝对定位与浮动元素相邻的情况-->
<a href="http://leyteris.iteye.com/" style="position:absolute;display:block;right:0;top:0;background:url(transparent_bg.png) no-repeat center;">首页</a>
<div style="float:left;">内容</div>

 

当绝对定位元素与浮动元素相邻时，绝对定位的元素在 IE6 下可能会消失（？？）。 

解决方案：在两者间插入一些其它标签。

 

情况三

 

<div style=’background:url(bg.png);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg_png8.png");’>
<a href="http://leyteris.iteye.com/" style="display:block;width:100px;height:100px;">点击访问</a>
</div>

当 <a> 标签所在容器使用了半透明滤镜时，会造成锚点失效 。该 <a> 标签不可点击，鼠标放上去也不是手型。 

解决方案：去掉滤镜。 这个 bug 的更好解决方案：http://www.css88.com/archives/2916

 

总结

发现这三种情况的共同点是：<a> 标签具有 "display:block;" 属性。所以，可能使用 <a> 进行 "display:block;" 本身就不是一个标准的做法，并且这种做法才是各种 bug 的根源吧！