按钮和输入框width行为不一致，因webkit内核下默认content-box且search/number等input含清除按钮等额外渲染；全局box-sizing需分两步：html{box-sizing:border-box}起点，,::before,*::after{box-sizing:inherit}继承；input、textarea、select、button、svg text须手动设content-box防光标错位、文字截断。
为什么按钮和输入框的 width 行为不一致
因为 input、textarea、select、button 在 WebKit 内核（Safari / 旧版 Chrome）下默认用 content-box，且部分元素（如 input[type="search"]）会额外渲染清除按钮或增减控件，导致实际内容区被挤压。你设了 width: 100%，但 padding 和 border 还是往外加，按钮撑出容器，输入框光标偏移——这不是 bug，是浏览器原生行为。
全局 box-sizing 设置必须分两步写
只写 * { box-sizing: border-box; } 看似省事，但在 Safari ≤12.1 下会漏掉 ::before 和 ::after，它们回退到 content-box，伪元素尺寸错乱；更重要的是，它会暴力覆盖表单控件，让 input 的 placeholder 错位、textarea 拉伸后最后一行文字被截断。
-
html { box-sizing: border-box; }—— 安全起点，html不参与渲染，无副作用 -
* , *::before, *::after { box-sizing: inherit; }—— 让所有元素继承，保留组件内显式声明box-sizing: content-box的能力
哪些元素必须手动重置为 content-box
不是所有表单控件都适合 border-box。以下元素在 Safari / iOS WebView 中用 border-box 会导致光标定位异常、文字截断或 SVG 垂直居中失效：
-
input（尤其type="search"、type="number"） textareaselectbuttonsvg text
集中声明，别散落在各处：input, textarea, select, button, svg text { box-sizing: content-box; }
验证时最容易忽略的实机场景
别只在 Chrome DevTools 里看 computed style 就认为 OK。真实问题集中在：
- Safari 中
input[type="search"]的 × 清除按钮位置偏移，光标不在文字正中 - Firefox 下
textarea拖拽拉伸后，最后一行底部被 border 截掉一像素 - iOS Safari 对
svg text的dominant-baseline渲染受box-sizing影响，垂直居中失效
这些不是偶发，而是盒模型切换后必然触发的底层渲染差异。只要项目含表单、SVG 或缩放适配，就必须在三端（Chrome / Safari / Firefox）实机或模拟器里逐个敲击、拖拽、缩放确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
