必须显式声明input、textarea、select、button{box-sizing:border-box;}，因safari15+、android4.4 webview及ie8–11会绕过继承链，坚持用ua默认content-box解析，且需同步重置padding、border、line-height才能实现视觉归一。
表单控件在不同浏览器下表现不一致，不是“样式没写全”的问题，而是盒模型、默认渲染逻辑、继承机制本身就不可靠——尤其在 Safari 15+、Android WebView（4.4 及更早）、IE8–11 这些环境里，input、textarea、select、button 的宽高、对齐、点击区域、事件触发都可能出岔子。
为什么 * { box-sizing: border-box } 对表单控件基本无效
这不是你漏写了，是 Safari 和部分 Android WebView 会绕过 CSS 继承链，直接按 UA 样式表的默认值解析：这些控件在它们眼里默认仍是 content-box。哪怕父元素设了 border-box，子级表单控件也不会继承。
-
input[type="search"]在 iOS Safari 下始终用content-box，全局选择器完全无效 - 旧版 UC 内核或某些 WebView 会把
border当作不可见占位符，导致box-sizing声明被静默丢弃 - Firefox 对
button的默认padding是4px 8px，Chrome 是6px 12px，IE8 是硬编码值——不显式重置，宽高就永远不准
必须单独声明 box-sizing 的表单控件列表
别只盯着 input，以下元素在主流浏览器中默认盒模型不一致，且继承不可靠：
-
input（所有类型：text、email、search、number） -
textarea（安卓 WebView 中常回退到content-box） -
select（Firefox 和旧 Edge 渲染逻辑差异大） -
button（Safari 和 Chrome 默认padding计算方式不同，box-sizing不生效就必然错位）
推荐写法：
input, textarea, select, button { box-sizing: border-box; }
只写 box-sizing 为什么还是错位
表单控件宽高不准，往往来自三处干扰源，必须同步控制：
-
padding：Chrome 默认
6px 12px，Firefox 是4px 8px，IE8 是硬编码 → 统一写死，如padding: 8px 16px -
border：Firefox 默认
1px inset，Safari 是1px solid→ 推荐border: 1px solid transparent，既占位又不显色 -
line-height 与高度控制：避免
height: 36px这种硬设 → 改用min-height: 36px+padding+line-height组合，文字垂直居中更稳
另外，button 在 Flex 容器中用了 flex: 1 0 0 却没设 box-sizing: border-box，Safari 会触发隐式 min-width: min-content 保护机制，导致按钮撑开容器或换行——修复方式除了 box-sizing，还得加 min-width: 0。
IE8–11 和旧 WebView 的兜底要点
这些环境里，光靠 CSS 不够，JS 层也要补位：
- 事件绑定不能只用
addEventListener，得 fallback 到attachEvent（IE8–10） -
checked属性在 IE9 及以下不支持，得用setAttribute('checked', true)或封装判断函数 -
button必须显式设display: inline-block和vertical-align: middle，否则 IE 按inline渲染，垂直对齐错位 - 移动端 Safari 点击有 300ms 延迟，
<meta name="viewport" content="width=device-width, initial-scale=1">是底线，再配合touchstart监听或 fastclick.js
真正卡住的不是“怎么写”，而是哪些地方**必须显式覆盖**、哪些行为**根本不会继承**——这些细节一旦漏掉，调试时就会陷入“明明写了却不起作用”的循环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
