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啦！

update: 2012/09/21

今天在网上 还看到一个方法，就是在a标签中添加一个<span>标签，通过设置<span>的背景来作为a的背景。

相应的css需要加入以下代码：

a:hover span
{
background:#fff;
display:block;
width:16em;
}

这个方法还是挺不错的，有很多的应用场景。比如同一个<a>下面需要对不同的文字显示不同样的时候，可以将不同的文字用两个<span>来包装，然后通过"a.hover span.class"来设置不同的样式。