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

案例：

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

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

按钮截图：

/* 设置样式 */

.btn, .btn span{ display:inline-block; background:url(ico-btn-sprite.png) no-repeat;}
.btn{ padding-left:10px;}
.btn span{ padding-right:10px; vertical-align:top; }

.btn-1{ background-position:left 0;}
.btn-1 span{ background-position:right 0;}

/* 移动上去的效果 */

.btn-1:hover{ background-position:left -30px;}
.btn-1 span{ background-position:right -30px;}

/* 点击时候的效果 */

.btn-1:active{ background-position:left -60px;}
.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>