必须显式声明 input、textarea、select、button 及 ::before、::after 的 box-sizing: border-box，因浏览器 ua 样式强干预导致继承失效，且伪元素、flex/grid 布局、第三方库等场景需精准覆盖，否则引发尺寸偏差与渲染错位。
直接写 * { box-sizing: border-box } 不行，复杂表单里 input、textarea、select、button 和伪元素会漏掉，Safari/iOS WebView 尤其容易失效，必须显式覆盖这四类元素 + 伪元素。
为什么表单控件必须单独声明 box-sizing
浏览器对表单控件的 UA 样式有强干预：Safari 把 input[type="search"] 当系统控件处理，忽略继承；Android 4.4 WebView 会静默丢弃 input 上的 box-sizing 声明；Firefox 默认用 inset 边框，Chrome 是 solid，IE6–7 甚至把无色边框当“隐形占位符”。这些都和 box-sizing 是否生效无关，但会放大偏差。
-
input、textarea、select、button必须显式写进选择器，不能靠通配符或父级继承 - 第三方 UI 库（如 Element Plus、Ant Design）常在组件内部加
!important回退到content-box，得用更具体选择器覆盖，例如input.ant-input - 某些
input类型（如type="date"或type="file"）在 Safari 中渲染逻辑特殊，仅设box-sizing不够，还得配padding: 0.375em和border: 1px solid
*::before, *::after 漏掉会导致表单装饰错位
很多表单组件依赖伪元素画下拉箭头、聚焦边框、清除按钮或浮动清空。如果没统一伪元素的盒模型，它们仍按默认 content-box 计算尺寸——比如一个 ::before { width: 12px; padding: 4px; } 在 Chrome 下总宽 20px，在 Safari 下可能撑成 28px，导致图标偏移、遮罩溢出或 JS 读取的 getBoundingClientRect().width 偏大。
- 必须写全：
*, *::before, *::after { box-sizing: border-box; } - 这条规则要放在所有 CSS 文件最顶部，否则会被 Normalize.css 或框架样式覆盖
- Shadow DOM 或 iframe 内的表单需单独重置，主页面的全局规则不穿透
表单控件的 padding/border/line-height 必须同步归一
box-sizing: border-box 只管尺寸计算逻辑，不管实际渲染结果。Chrome 给 input 默认 padding: 6px 12px，Firefox 是 4px 8px，IE8 是硬编码值，这些差异会直接造成横向滚动条、文字贴顶或高度不齐。
- 推荐统一写死：
padding: 8px 16px;（比默认值略宽松，兼容多数字体缩放） - 边框统一用：
border: 1px solid transparent;——既保留占位防 IE6–7 挤压，又不显色 -
line-height必须设为无单位值（如line-height: 1.5;），避免font-size动态变化时撑高容器 - 避免硬设
height，改用min-height: 36px;+padding+line-height组合控制垂直居中
Flex/Grid 表单布局中 min-width 和 overflow 容易被忽略
当表单控件作为 Flex 子项（如 flex: 1 的输入框）或 Grid 子项时，若没设 box-sizing: border-box，Safari 会触发隐式 min-width: min-content 保护机制，导致输入框意外撑宽、换行或溢出父容器；长文本或 URL 还可能撑裂轨道。
- 所有表单控件在 Flex/Grid 容器中必须额外加：
min-width: 0;关闭 Safari 的保护 - 配合
overflow: hidden;防止文字撑开，尤其在input或textarea上 - 不要在表单子项上写
width: 100%，它会无视gap和flex-basis强行占满 - Grid 中慎用
minmax(200px, 1fr)，若子项含border: 2px且box-sizing: content-box，实际最小宽度是 204px
真正起效的不是“写了那三行”，而是确保它从 HTML 第一个字节开始就控制每个新插入节点——动态生成的表单项、第三方插件弹窗里的 input、甚至 SVG 内嵌的 <foreignobject></foreignobject>，都得被这套规则兜住。漏掉任何一个环节，偏差就藏在那里，只在 Safari 或某个 Android WebView 里悄悄出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
