button按钮宽度兼容性

项目中的需求：要求按钮左右边距为 5px；最小宽度为 50px(即按钮最小宽度为 60px)，兼容各浏览器。

效果
a标签 撑开撑开撑开撑开



CSS
input{ margin:0; padding:0; border:0; font:normal 12px/20px "\5b8b\4f53"; vertical-align:middle; } //input css reset

.button{
padding:0 5px; //左右内边距 5px
display:inline-block; *display:inline; *zoom:1;
min-width:50px; width:auto !important; width:50px; //最小宽度 50px
height:20px;
white-space:nowrap; //解决ie6折行的问题
*overflow:visible; //设置这个属性IE6/7下padding才会生效
color:#fff; text-align:center; background-color:#327E33; cursor:pointer;
}

input.button{ min-width:60px; width:auto !important; width:60px;
min-width:50px\0; //ie8 hack
_line-height:15px; //ie6 hack
}

@-moz-document url-prefix(){
input.button{ padding:0 2px; min-width:60px;} //firefox input内左右文字有 3px的间距
}//火狐hack

“Firefox强行把按钮内文本的行高设置为normal，这个值在Firefox里默认为15px”

效果
按钮按钮

css
.btn_img{
padding:0 10px; //左右内边距为 10px
border:1px solid #ccc;
display:inline-block; *display:inline; *zoom:1;
min-width:68px; width:auto !important; width:68px; height:18px;
*vertical-align:middle; //修复按钮在 ie6/7下的垂直显示
font:normal 12px/18px "\5b8b\4f53"; color:#36c; text-align:center; background-color:#F5F5F5; cursor:pointer;
}

.btn_img img{
margin-right:5px;
margin-top:1px; vertical-align:top;
*margin-top:0; _padding-bottom:1px; *vertical-align:middle; //ie6/7中图片后面的文字也会显示问题
width:16px; height:16px;
}

.btn_img:hover{ color:#36c; text-decoration:none; background-color:#fff;}

文本框(input)垂直居中(未测试)
padding:3px 1px 0;font:16px/16px arial;vertical-align:middle;

padding:3px 1px 0;font:行高值px/行高值px arial;vertical-align:middle;