input与select 设置相同宽高，在浏览器上却显示不一致，不整齐

遇到 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。

好了，说到这里了，下次用到时参考下，在调试吧。

 

 

转载于:https://www.cnblogs.com/qing-xuanlvyee/p/3868702.html