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下就没有问题啦！

 

 

 

转载于:https://www.cnblogs.com/hutaoer/archive/2012/08/16/2642579.html