input框高度ios上变形，在安卓和谷歌浏览器（iphone模拟器调试）上正常

开发时遇到个样式问题，input框在安卓机和谷歌模拟器上显示正常，但是在ios上则超过预期高度，显得有点变形，如下图

 

左边1为谷歌中，中间2是在ios真机上，右边3是安卓，可以明显看出，ios中输入框超过正常高度，但是两个输入框间的距离反而小了。

本来以为是适配问题，使用的是媒体查询设置不同尺寸的font-size，但是想了想，如果跟font-size有关，导致ios下input框高度变高，相应的，两者间距也应该相应变高，所以应该不是；

后来考虑，应该只是input框自身的问题，而实际上两者间距（通过input父级设置的margin-bottom）是没问题的（因input变高，压缩了两者间本来不变的间距，导致间距变小），因此想到了盒子模型，后来给input设置了box-sizing:border-box;果然，问题解决了。

 

问题原因：（猜测）ios默认盒子模型为content-box；而安卓和谷歌是border-box。

解决方法：给input设置box-sizing:border-box;(或者content-box)