按钮兼容最佳解决方案

鉴于按钮在网页中应用广泛，且在表单布局中兼容性问题比重较大，有必要针对按钮实现统一兼容解决方案。

首先要实现如下四种常用代码结构实现的Button表现相同（宽高大小对齐方式等，消除兼容性差异）

• 已知的Bug：慎用A标签提交表单IE6下事件冲突
• 为什么不用图片按钮？图片按钮虽能全兼容，但适应性扩展性都不高（所以它只能成为临时/应急解决方案），同时为了向前发展及提高效率，也必须要舍弃这种低效的做法。

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

/* 注意事项-自适应按钮问题颇多，主要表现在：
 * IE6/IE7，高度不能使用padding去搞，需设置具体高度，a标签按钮同时需设置相应line-height保持垂直居中，宽度自适应则比较容易
 * Firefox火狐下input的line-height无效，仅跟字体大小或input高度关联控制，input按钮高度表现不一致，需要定高解决
 * 另外IE6，IE7，IE9，IE10，Firefox，Opera的按钮都有聚焦的虚边线（IE8和chrome没有虚线）opera下input按钮还有黑色实边线，影响美观，需要处理(firefox，opera可通过outline来处理虚边线，IE6-10可以使用js方法添加hidefocus属性去除虚线)
 */
button,
input {
    *overflow: visible; /* IE6/7 内间距宽度一致 */
    line-height: normal;
}
.btn {
    *border: 0; /* IE6 IE7下聚焦状态会有不可控的黑色边框 */
}
input.btn{
    _width: auto;
    /* IE6下使input的按钮和a及button的按钮保持宽度一致 */
}

问题及注意事项：

• text-indent在IE6/IE7中的位置偏移BUG

实践出真知