a标签代替input[button]

最近学到一招，就是用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;
}

 

相关知识点：

¹ IE6在默认情况下，并没有遵守CSS的规范，它对a元素也同样设置了高度、宽度等属性