根本原因是浏览器对表单控件的默认渲染逻辑不同：input、select、textarea由os/浏览器原生绘制，chrome用blink渲染number微调钮，safari用webkit绘带阴影button，firefox对textarea拖拽手柄和字体继承更固执；这些差异非bug，而是厂商实现差异。
根本原因不是你写错了 CSS，而是浏览器对同一 HTML 元素的默认渲染逻辑不同——input、select、textarea 这些控件由操作系统或浏览器原生绘制，Chrome 用 Blink 渲染 input[type="number"] 的微调按钮，Safari 用 WebKit 绘制带内阴影的 button，Firefox 则对 textarea 的可拖拽手柄和字体继承更“固执”。这些差异不是 bug，是厂商对表单语义的不同实现。
为什么 appearance: none 经常失效
只写 appearance: none 几乎没用。macOS Safari（15.4 之前）只认 -webkit-appearance: none，Windows Firefox 对 select 和 input[type="checkbox"] 的 -moz-appearance: none 支持有限，甚至完全忽略。更麻烦的是：即使外观清掉了，Chrome 的 input[type="number"] 还会残留 ::-webkit-inner-spin-button，Safari 的 input[type="date"] 根本不响应任何 appearance 声明。
- 必须同时声明
-webkit-appearance: none、-moz-appearance: none和appearance: none - 对
input[type="number"]额外加::-webkit-inner-spin-button { appearance: none; }和::-webkit-outer-spin-button { appearance: none; } -
select清掉箭头后，点击区域变窄，得靠padding-right预留空间，再用::after绘制自定义图标 -
input[type="date"]在 Safari 上建议降级为input[type="text"]+ JS 日期选择器，别硬刚
为什么 form-control 高度在 Chrome/Firefox/Safari 里差 2–4px
不是 Bootstrap 的锅，是浏览器对 box-sizing、padding、line-height 和 border 的解析策略不一致。IE11 把 border 算进高度，Chrome 默认按 content-box 解析，Firefox 对 line-height 的继承行为又略有不同。叠加起来，视觉高度就错位了。
- 绝对禁止给
.form-control设固定height或line-height：textarea 不响应line-height，Safari 的select忽略height - 改用
min-height: calc(1.5em + 0.75rem + 2px)，其中1.5em是行高基准，0.75rem是上下 padding，2px是 border 总宽 - 确保
box-sizing: border-box显式声明——Bootstrap 4+ 默认有，但 Bootstrap 3 或自定义构建版本必须手动补 - 所有尺寸统一用
rem或em，避开像素硬编码，否则缩放或字体变更时立刻翻车
为什么 label 和 input 水平排列时总对不齐
默认 vertical-align: baseline 是罪魁祸首。文字基线和表单控件的“视觉基线”本来就不重合，再加上不同字体（比如 San Francisco）在小字号下字形下沉明显，错位就更明显。
- 给
label和表单控件同时设vertical-align: middle，别用top或bottom——后者依赖行高，一变就偏 - 父容器必须有明确
line-height（如line-height: 1.5），否则vertical-align: middle的参考基准不稳定 - 若仍偏移，先检查
font-size和font-family是否一致；必要时用transform: translateY(-1px)微调，但仅限兜底 - 避免混用
display: inline和display: inline-block，后者更可控，但必须注意vertical-align的连锁影响
最易被忽略的一点：Normalize.css 或 sanitize.css forms.css 只管“原生元素渲染基线”，不管设计稿要求的圆角、边框色、focus 样式，也不处理 iOS textarea 的拉拽手柄、Safari 移动端 focus 高亮蓝框——这些都得你亲手补，而且顺序不能错：重置必须在所有自定义样式之前，否则白干。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
