根本原因是input默认padding/border叠加content-box盒模型导致width:100%超限；须显式重置margin、padding，设box-sizing:border-box，并清除appearance及补全placeholder样式。
input默认margin和padding不一致导致撑大变形
直接写width: 100%却撑破父容器，八成不是你写错了，而是浏览器给input偷偷加了默认margin或padding，再叠加上box-sizing: content-box（IE9以下默认、部分旧WebView仍如此），结果width: 100% + padding + border就真超宽了。
- Chrome 对
input[type="text"]默认设padding: 1px 2px，Firefox 可能是padding: 2px 4px，Safari 还可能给input[type="search"]额外加右侧图标区域的内边距 - 某些版本 Firefox 会悄悄加
margin，尤其在 inline 场景下，DevTools 的 Computed 面板里常看不到，但布局已错位 -
border虽小（常为1px），但在content-box模式下也会参与宽度计算，一并计入
必须显式重置 margin、padding 并锁定 box-sizing
别指望继承或 UA 样式统一——它们根本不统一。最稳妥的做法是针对性重置，而非全局通配：
- 对所有表单控件统一写：
input, select, textarea, button { margin: 0; padding: 0; box-sizing: border-box; } - 若项目已用 Bootstrap 或 Ant Design 等 UI 库，先查它是否已设过
box-sizing；重复设置可能导致 padding 被叠加（比如库设了padding: 6px 12px，你又加一层padding: 8px） - 避免用
* { box-sizing: border-box }，它会影响table、iframe等语义化元素，引发不可预期的尺寸收缩
移动端特别注意：键盘弹出时 width: 100% 仍可能溢出
即使写了 width: 100%; box-sizing: border-box，在 iOS Safari 或部分安卓 WebView 中，键盘弹出后视口缩窄，100% 仍可能基于原始宽度计算，造成水平滚动条或内容截断。
- 加
max-width: 100%双保险：input.form-control { width: 100%; max-width: 100%; box-sizing: border-box; } - 若父容器用了
flex，优先用flex: 1替代width: 100%，它在键盘弹出时响应更稳 - 禁用缩放的
<meta name="viewport">必须存在，否则用户双击放大后，width: 100%会按放大后的视口重新计算
容易被忽略的“隐形撑大”：appearance 和 placeholder
Chrome 的 input[type="number"] 右侧微调按钮、Safari 的 input[type="search"] 清除图标，都会侵占 padding 区域——你写的 padding: 12px 实际只作用于文字区左侧和顶部，右侧被原生控件吃掉，视觉上就是左右不对称、像被撑歪了。
- 一律加三端前缀清除：
-webkit-appearance: none; -moz-appearance: none; appearance: none; - 清除后需手动补回右侧 padding（如
padding-right: 12px），否则光标贴边 -
::placeholder若没设opacity: 1，Firefox 默认opacity: 0.53，看起来像文字变淡、框体“空了一块”，误判为 padding 不足
实际宽度失控往往不是单一属性的问题，而是 margin、padding、border、box-sizing、appearance 在不同浏览器中组合生效的结果。动手前，先打开 DevTools 的 Computed 面板，挨个看这五项的真实值，比猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
