在Chrome、IE8、Via (Android 6.0.1) 中测试成功,其他浏览器未测试。
INPUT和BUTTON不在同一高度的原因主要在于Line-heightpaddingmarginborder-width这几个参数。
第一种办法是修改行高(不确定高度的时候),行高也会影响高度是我无意中发现的,设置为normal后很管用,但是BUTTON内容为中文时在ie8中还是会失效,不知道是不是字体问题,暂时没时间去试。
第二种办法是不显示BUTTON,然后用个label来代替。

第一种方式:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
button,input{
border: 1px solid rgb(180,190,190);
background-color: rgb(240,240,240);
outline: none;
padding: 2px 5px;
margin: 2px;
line-height: normal;
font-family: inherit;
}
</style>
<input><button>Submit</button>

效果
Chrome && IE8:
buttonie8BUTTONie8

但是当BUTTON内容为中文时,chrome正常,IE8异常
buttonie8buttoninie8