input默认margin和padding不一致导致对不齐，需统一box-sizing: border-box并显式重置margin和padding；flex布局下需用align-self: center解决基线错位；ie11兼容推荐float或table-cell；rem/em易致文字缩放失准，建议input内用px定死尺寸。
input默认margin和padding不一致导致对不齐
浏览器给input设了不同默认值：Chrome/Edge里input[type="text"]有padding: 1px 2px，而button或select可能是padding: 1px 6px；更麻烦的是，有些老版本Firefox还偷偷加了margin。结果就是明明写了display: flex，元素却上下错位。
- 统一用
box-sizing: border-box打底，避免padding意外撑大尺寸 - 显式重置
margin和padding：input, select, button { margin: 0; padding: 4px 8px; } - 如果用了
font-size: 14px，建议line-height: 1.2配合，不然文字在框里“飘”
flex布局下input高度塌陷或基线不对齐
input默认是display: inline行为，在flex容器里会按align-items: stretch拉伸，但实际又受line-height和vertical-align干扰——尤其跟label或文字混排时，经常看到底部空一截。
- 给
input加align-self: center，比依赖父级align-items更可控 - 避免用
vertical-align: middle，它对flex子项无效，纯属误导 - 若需等高，直接设
height: 36px并配合box-sizing: border-box，别指望padding自动撑出想要的高度
IE11里input和label间距诡异变大
IE11不支持flex对input的某些属性解析，比如align-items在inline-flex容器中失效，且label默认display: inline，和input之间会吃掉空白符，形成不可控间隙。
- 给
label和input都加float: left+clear: both（虽然土，但IE11里最稳） - 或者改用
display: table-cell模拟行内对齐，兼容性比flex好 - 绝对不要用
font-size: 0去消空白——IE11里可能让input文字直接消失
使用rem/em时input内部文字缩放失准
当根字体font-size设为62.5%（即1rem=10px），再给input设font-size: 1.4rem，看起来是14px，但部分Android WebView或旧版Safari会把input的默认font-size继承逻辑搞乱，导致文字偏小或被裁切。
- 优先用
px定死input的font-size和height，只对外层容器用rem - 加
min-height: 36px兜底，防文字撑高后破坏行高 - 测试时重点看
input[type="date"]和input[type="number"]，它们在iOS上常有额外内边距
盒模型冲突从来不是单点问题——input的渲染逻辑夹在表单规范、浏览器私有实现和CSS继承链中间，调一个padding可能牵出三个隐藏条件。真要省事，就老老实实写个form-control类，把box-sizing、margin、font-size、height全锁死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
