遇到 input与select 设置相同宽高，在浏览器上却显示不一致，遂实验了下（IE 10.013 ，Firefox 30.0），得出以下结论
input width，height 值里面， 不包含 border边框和padding内边距，即：设置的只是内容本身的高与宽。border与padding不在值里面，在浏览器上显示可见。
select width，height 值里面， 包含 border边框和padding内边距，即：设置的高宽里面包含了内容本身，border与padding的整体。padding值，border，内容是从值里面分走的高宽度，所以内容高宽会相对减小。如果padding值超过了对应值，整体样式会变。
所以，两者设置相同的值，却会显示不整齐。
下图黄色为border边框，绿色padding，中间的蓝色是内容。
下图input 下图select
input{ height:32px; width:200px; } select{ height:32px; width:200px; }
显示：
input{ height:32px; width:200px; } select{ height:clac(32px + 2px); width:clac(200px + 2px); }
显示：
input{ height:32px; width:200px; padding:10px 10px; } select{ height:clac(32px + 2px); width:clac(200px + 2px); padding:10px 10px; }
显示：
以上实验在pc端实用，今天发现在手机端行不通，特此为记：
在手机端的状态是，width可以设置宽度，而高度用height不顶用，两种方法可以改变高度：
1.font-size可以撑起宽度，但字体改变了；
2.加上multiple时宽度可用，但option变成多选状态了；
所以以上都不完美
解决方法：
把select放到一个div里面，把div高宽调成与同级input相同，设置overflow：hidden隐藏select溢出，select宽度设成100%，border：none，
至于垂直居中：由于select不能设高度，就用jquery控制，获取select高度outerHeight, margin-top：div高度减去它除以二，select设display：block。
好了，说到这里了，下次用到时参考下，在调试吧。