用a标签模拟按钮,在IE下的active伪类问题(使用图片作为背景)
2013-04-07 09:26
417 查看
案例:
通过a标签模拟按钮,为了让按钮能自动适应文字大小的宽度,通常这样:
<a href="javascript:void(0)" class="btn btn-1"><span>按钮</span></a>
按钮截图:
在IE和Opera下 点击a的padding-left部分会有active效果,点击span部分的时候就没有active效果。。。
如图:
解决方法:
给a标签添加鼠标按下(onmousedown)和鼠标弹起(onmouseup)事件模拟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>
相关文章推荐
- 解决IE下图片作为背景时,有鼠标操作时的抖动问题:
- 使用9Patch图片作为按钮背景
- Android------使用9Patch图片作为按钮背景
- 给Button按钮设置背景图片在IE下不能正确显示的问题
- 解决IE下图片作为背景时,有鼠标操作时的抖动问题
- 解决IE6中CSS使用透明背景图片的问题
- IE6下图片作为背景时鼠标操作抖动的问题
- IE7下按钮<input>不显示自定义背景图片
- IE7下按钮<input>不显示自定义背景图片
- 关于html中使用img标签显示图片问题
- 在head标签里加一个meta标签让指定ie使用特定内核 解决css在ie中的兼容性问题
- 使用图片作为提交按钮调用Javascript验证表单
- 使用img标签和背景图片之间的区别
- IE7下按钮<input>不显示自定义背景图片
- IE7下按钮<input>不显示自定义背景图片
- IE下Button背景图片无效的问题
- 完美去掉a标签和按钮加背景图片阴影
- IE7下a标签下包含图片时无法点击的问题
- Vue2.0中使用less给元素添加背景图片出现的问题