input和select在浏览器中宽度不同解决方案（原创）

Posted 2020-10-30 dingxiangming

在给一个网站做适配的时候，遇到的问题，input和select 均设置相同的宽度，最后浏览器下呈现出来的宽度不一样，一时间很难下手。

于是找到了根本原因

select的css width样式，包含边框和内边距，即：真实的width=CSS width。

而input的css width样式，则不包含边框和内间距，真实的width=CSS width border padding。

解决的方法：

给select添加 box-sizing: border-box; 以后完美解决。

普及box-sizing知识

为元素设置：box-sizing: border-box;，则表明width的宽度为内容本身宽度+padding+border（高度一样）

为元素设置：box-sizing: content-box;，（默认就是这个），则表明width的宽度就是内容本身的宽度，padding以外的再另算。

而input、select默认的样式是不同的，所以就造成了width设置的一样，但就是对不齐。全部设成border-box就省事了。

（IE8及以上版本支持。）