IE下a标签中内容为空，在页面中无法显示其hover样式的解决方法

最近做一个活动页面，页面中有一个按钮，如果抠图处理单独作为按钮图片的话，效果不是很好，于是想将整个图作为背景，然后在设置一个<a>标签作为按钮通过绝对定位使其与图片中的按钮重合，从而达到点击按钮的效果。一切在chrome和FF下都很顺利，又在IE下栽了跟头。因为在IE下不会出现<a>标签的hover样式，也无法点击。若果将<a>设置背景色，则IE下就可以识别<a>了，但是又没有透明的背景色，于是想到用滤镜，但是IE6又无法兼容。后来还是只能将图片作为背景来设置，而不是通过<img>标签来放图片，就不会出现这些问题了。

 

之前是用的<img>来放置图片，代码如下：

<div id="a-box">
        <img src="http://img01.taobaocdn.com/tps/i1/T1vyryXixpXXaAmJDA-280-57.jpg">
        <a href="#" id="a-btn"></a>
</div>

css代码如下：

#a-box {
        width: 280px;
        height: 57px;
        position: relative;
    }
    #a-btn {
        position: absolute;
        width: 156px;
        height: 47px;
        display: block;
        left: 63px;
        top: 5px;   
    }

 

这时候，IE下无法得到<a>标签及其hover效果。

 

由于设置<a>标签的背景色可以达到效果，想到使用滤镜，html代码不变，css代码如下：

#a-box {
        width: 280px;
        height: 57px;
        position: relative;
    }
    #a-btn {
        position: absolute;
        width: 156px;
        height: 47px;
        display: block;
        left: 63px;
        top: 5px;
        background:#fff;
        opacity:0;
        filter:alpha(opacity:0);
    }

IE7以上能实现，但IE6不支持滤镜，所以，会出现<a>的背景色，如图所示：

 

 

所以，还是不能这样子写的。于是，去掉了<img>标签，改为设置包含<img>的div的背景来实现，html代码如下：

<div id="b-box">
        <a href="#" id="b-btn"></a>
</div>

css代码就很简单咯：

 

#b-box {
        width: 280px;
        height: 57px;
        position: relative;
        background: url(http://img01.taobaocdn.com/tps/i1/T1vyryXixpXXaAmJDA-280-57.jpg) no-repeat;
    }
    #b-btn {
        position: absolute;
        width: 156px;
        height: 47px;
        display: block;
        left: 63px;
        top: 5px;
    }

这样IE下就没有问题啦！