表单控件的 padding 被浏览器 ua 样式覆盖导致视觉不一致，需显式声明 box-sizing: border-box、统一 line-height 与 font-size 关系，并为 select 单独设置足够 padding-right 以兼容 ios 箭头。
表单控件的 padding 被浏览器 UA 样式“悄悄覆盖”
不是你写的 padding: 0.5rem 没生效，而是浏览器自带的 user agent stylesheet 在背后加了另一套值——比如 Chrome 给 input[type="text"] 默认设 padding: 1px 2px，Firefox 可能是 padding: 2px 4px，Safari 还可能按字体度量动态调整。这些值不写在你的 CSS 里，但会参与层叠计算，最终 computed 值是你写的 + 它们加的，导致视觉高度、文字对齐、下拉箭头位置全乱。
实操建议：
- 打开开发者工具，在 Styles 面板里直接搜索
padding，看是否有带/* user agent stylesheet */的条目——那是根源 - 别依赖
* { padding: 0 }，它会干掉select右侧箭头所需的padding-right，iOS Safari 会直接裁切箭头 - 用
input, select, textarea { padding: 0.375rem 0.75rem !important; }强制覆盖，但仅限你真正控制的表单范围（如.form-control类）
box-sizing 不一致让 padding “算进还是算外”成了玄学
旧版 IE 默认用怪异盒模型（box-sizing: border-box），Chrome/Firefox 默认用标准模型（box-sizing: content-box）。当你写 width: 200px; padding: 10px，IE 渲染出的内容区宽 180px，Chrome 是 200px——结果就是同一行里两个输入框，一个窄一个宽，还可能触发横向滚动。
实操建议：
- 必须在所有表单控件上显式声明
box-sizing: border-box，不能只靠 Bootstrap 或 Normalize.css 默认带（Bootstrap 3 不带，自定义构建可能漏） - 不要只给父容器设
box-sizing，子元素不会自动继承；每个input、select都得单独加 - 检查是否用了 CSS-in-JS 或 Shadow DOM：Normalize.css 默认不作用于影子树，需手动注入或用
:host规则补
line-height 和 font-size 与 padding 耦合，一动全崩
padding 看似独立，但它和 line-height 共同决定控件“视觉高度”。Firefox 对 line-height 的继承更严格，Chrome 更倾向忽略小字号下的 line-height；而 Safari 在 font-size: 14px 下默认把 line-height 拉到 1.2，其他浏览器可能是 1.0。这时候哪怕 padding 一样，文字上下留白也不同，看起来就像 padding 不一致。
实操建议：
- 放弃用
height或line-height控制表单高度，改用min-height: calc(1.5em + 0.75rem + 2px)—— 把 font-size、padding、border 全包进计算 - 避免用
em设 padding：Firefox 的1em基于父元素 font-size，Chrome 可能基于自身渲染逻辑，数值浮动 - 调试时关掉开发者工具的 “Computed” 面板，直接看 “Styles” 里每条规则的来源，尤其是
line-height是哪来的
iOS Safari 的 select 箭头和 padding-right 是硬绑定
这不是 bug，是 Safari 的设计约束：select 右侧原生下拉箭头的位置由 padding-right 值决定。如果你设 padding-right: 0.25rem，箭头就贴边；设 0.5rem，它才居中显示。Chrome/Firefox 没这限制，所以你在它们身上调好了 padding，在 iOS 上一跑，箭头要么被裁掉，要么飘到右边空白里。
实操建议：
- 对
select单独写规则：select { padding-right: 1.25rem; }（至少 1.25rem 才能容下箭头） - 别用
text-align: right试图“骗”箭头对齐——它只影响文字，不影响箭头 - 真要彻底控制外观，用
appearance: none+ 自定义背景箭头，但记得补padding-right留出空间
真正卡住人的从来不是 padding 值本身，而是它和 box-sizing、line-height、font-size、甚至 UA 渲染引擎的隐式绑定——改一处，得同步查三处 computed 值，不然视觉节奏就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
