最近学到一招,就是用a标签代替button,之前都是用input来做。这次在项目里试用了下,感觉很好,能够很好实现样式与结构分离,尤其是要实现鼠标滑过轮换图片效果,利用a:hover就可以,很方便。但是,如果是表单中的button,通常需要回车提交表单,则不建议用a替换。
实例:
.btn {
display:block; /*a tag's default property is inline, it has no width and height property*/
height:20px;
width:61px;
background:url(images/btn_submit.gif) no-repeat;
text-indent:-9999px;
outline:none;
}
html:
<a class="btn" href="#">123</a>
衍生情况:(项目中碰到另外种情况,button文字是特殊字体,直接切背景图片来实现,a标签中文字必须要隐藏掉)
css改为:
.btn {
display:block;
height:20px;
width:61px;
background:url(images/btn_submit.gif) no-repeat;
text-indent:-9999px;
outline:none; /*text-indent方法隐藏,会导致button外面虚线框往左延伸,此属性隐藏虚线框*/
}
或者
.btn {
display:block;
height:20px;
width:61px;
background:url(images/btn_submit.gif) no-repeat;
line-height:100px; /*line-height用来调节文字位置,目标是让文字在背景图片之下,这样overflow才能隐藏掉所有文字*/
overflow:hidden;
}
相关知识点:
1 IE6在默认情况下,并没有遵守CSS的规范,它对a元素也同样设置了高度、宽度等属性