用a标签模拟按钮，在IE下的active伪类问题（使用图片作为背景）

案例：

通过a标签模拟按钮，为了让按钮能自动适应文字大小的宽度，通常这样：

<a href="javascript:void(0)" class="btn btn-1"><span>按钮</span></a>

按钮截图：

 1 /* 设置样式 */
 2 
 3 .btn, .btn span{ display:inline-block; background:url(ico-btn-sprite.png) no-repeat;}
 4 .btn{ padding-left:10px;}
 5 .btn span{ padding-right:10px; vertical-align:top; }
 6 
 7 .btn-1{ background-position:left 0;}
 8 .btn-1 span{ background-position:right 0;}
 9 
10 /* 移动上去的效果 */
11 
12 .btn-1:hover{ background-position:left -30px;}
13 .btn-1 span{ background-position:right -30px;}
14 
15 /* 点击时候的效果 */
16 
17 .btn-1:active{ background-position:left -60px;}
18 .btn-1:active span{ background-position:right -60px;}

在IE和Opera下 点击a的padding-left部分会有active效果，点击span部分的时候就没有active效果。。。

如图：

 

 

解决方法：

给a标签添加鼠标按下(onmousedown)和鼠标弹起（onmouseup）事件模拟active效果。

<!-- js部分 -->
<script src="jquery.js"></script>
<script>
$(function(){
    $(".btn-1").mousedown(function(){
        $(this).addClass("active");
    }).mouseup(function(){
        $(this).removeClass("active");
    })
})
</script> 
<style>
/* css部分... */
.btn-1:active, a.active{background-position:left -60px;}
.btn-1:active span, a.active span{ background-position:right -60px;}
</style>

 

posted @ 2013-04-07 09:26  caijf  阅读(679)  评论(0)  编辑  收藏  举报