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

拼搏现实的明天。 2021-07-04 17:26 389阅读 0赞

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

input{  height:32px; width:200px; }

![在这里插入图片描述][20191113091640861.png]  
下图`select`

select{  height:32px; width:200px; }

![在这里插入图片描述][20191113091649104.png]  
显示：  
![在这里插入图片描述][20191113091725825.png]

input{  height:32px; width:200px; }　
    
    select{  height:clac(32px + 2px); width:clac(200px + 2px); }

![在这里插入图片描述][20191113091823934.png]  
![在这里插入图片描述][20191113091857886.png]  
显示：  
![在这里插入图片描述][20191113091916235.png]

input{  height:32px; width:200px; padding:10px 10px; }
    
    select{  height:clac(32px + 2px); width:clac(200px + 2px); padding:10px 10px; }

![在这里插入图片描述][20191113091954420.png]  
![在这里插入图片描述][20191113092001686.png]  
显示：  
![在这里插入图片描述][20191113092250416.png]  
![在这里插入图片描述][20191113092308229.png]

以上实验在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`。

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

[20191113091640861.png]: /images/20210704/3a436db9f4f74b469dc3862eaadeb848.png
[20191113091649104.png]: /images/20210704/04a230b5623a43b7bec181810bb53d3d.png
[20191113091725825.png]: /images/20210704/b00112eae1bf4f86a4e0166a27e5948e.png
[20191113091823934.png]: /images/20210704/12ba3d4d291a42bc896d897b8e2131dd.png
[20191113091857886.png]: /images/20210704/3e33668c02934b908438533ed3adba69.png
[20191113091916235.png]: /images/20210704/e868cc7ab6d14bdb9c82cb22ebf6078a.png
[20191113091954420.png]: /images/20210704/53e0d6c1d32b492da13b37c9fbc801bc.png
[20191113092001686.png]: /images/20210704/2fc4209003c141ffa1aad8ab013fe970.png
[20191113092250416.png]: /images/20210704/fe6e76fd3d6c47af97bbd406a942ce17.png
[20191113092308229.png]: /images/20210704/efe929b072a24293a005a9d187631979.png