使用a标签代替input

使用A标签来代替input 可以实现很好的样式与结构的分离，尤其是鼠标划过等效果，利用a:hover就可以，很方便。但是，如果是表单中的button，通常需要回车提交表单，则不建议用a替换。当然，也可以配合javascript脚本来实现回车按键的侦测和绑定。

实例：

.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元素也同样设置了高度、宽度等属性