案例：
通过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>