空的a标签在ie7、ie8下无效
最近几天做了一个项目，由于图片较多图片上又有按钮，所以绝对用img加a标签的方法进行布局！
HTML代码如下：
<ul class='down_content clearfix'> <li><img src='imgs/phone_01.png' /><a href="#"></a></li> <li><img src='imgs/phone_02.png' /><a href="#"></a></li> <li><img src='imgs/phone_03.png' /><a href="#"></a></li> </ul>
CSS样式：
.down_content li a{width:120px; height:32px; position:absolute; right:24px; bottom: 38px;display: block; }
效果图如下：
我把a标签定位到下载按钮上，当鼠标悬浮在下载按钮上面时可以进行跳转，在其他浏览器下没有任何问题，可是当我在ie8和ie7下查看兼容性时发现了一个问题，鼠标悬浮在下载按钮上时没有任何反应，也没有a标签的手型图案。我开始以为是图片把a标签给遮盖住了，虽然感觉可能性不大应该我毕竟先写的图片后写的a标签。但本着宁可错杀不可放过的精神，我就迅速改变a标签里面的样式增加z-index，结果发现果然没有任何反应。
于是我就快速在网上搜索解决方法，还好网上有同仁和我遇到的问题一样，并且给了解决方法，于是我再次修改css样式，如下：
down_content li a{width:120px; height:32px; position:absolute; right: 24px; bottom: 38px;display: block; background:#fff; opacity:0;filter:alpha(opacity=0);}
也就是给a标签随便添加背景色或者背景图片，然后将a标签的透明度设置为0，在IE中使用滤镜的方法让背景色不显示！结果发现还不错，最起码ie8和ie7显示正常了，a标签可以点击！但是这个方法还是存在局限性的，众所周知ie6是一个比较奇葩的浏览器，虽然我们平时做某些项目的时候可以直接忽略掉ie6，但是如果客户没有说明我们还是尽可能的兼容一下ie6，不仅可以卖弄一下知识还可以向客户说明我们是专业的。既然要照顾ie6上面的css样式就不能用了，没有办法只能继续在网上找寻答案，当然功夫不负有心人，有找到一个解决方法拿来一试。
也就是要给a标签添加背景色，还好我这所有的下载按钮都是一样的，我赶快把下载按钮切下来放到a标签中，问题又一次解决！
.down_content li a{width:120px; height:32px; position:absolute; right:92px; bottom:38px; display: block; background:url(../imgs/down_btn.png) no-repeat;}
通过以上对问题的描述，我们对空a标签在ie7和ie8下点击无效的问题进行总结一下，如果a标签中通过绝对定位进行布局，a标签中没有文字也就是为空并且没有背景，这个时候在IE浏览器下，a标签表现成display:inline，不管给它怎么设置z-index还是display:block都不显示。
这种时候有两种解决方法（主要是针对a标签不能设置背景情况）：
1、给a标签添加样式：background:url(about:blank);
2、给a标签随便添加背景色或者背景图片，然后将a标签的透明度设置为0，不过在IE中需要使用滤镜，即 opacity:0;filter:alpha(opacity=0);
两种方法各有各的优势，你可以根据自己的需求选择最适合自己的解决方法！
如有问题，欢迎留言探讨！
