select高度不一致的根本原因是其作为系统级替换元素，height仅为建议值，实际高度由浏览器引擎和操作系统共同决定；应优先用padding控制文字区域留白，配合font-size、border和box-sizing: border-box实现跨平台一致效果。
select高度不一致，根本不是height属性的问题
直接给 select 写 height: 40px 在 Chrome、Firefox、Safari 甚至同一浏览器不同系统（macOS vs Windows）下渲染出的实际像素高度都可能差 2–4px。这不是 bug，而是各引擎对表单控件的“替换元素”实现逻辑不同：它们把 select 当作黑盒处理，height 只是建议值，最终由系统 UI 组件决定视觉高度。
用padding替代height控制文字区域留白
真正可控的是内边距，而不是总高。所有主流浏览器都尊重 padding 对 select 的作用，且行为稳定：
-
padding-top和padding-bottom能可靠撑开文字上下空间 - 配合
font-size和border，可推算出接近一致的视觉高度 - 避免写
line-height——它在部分浏览器（如旧版 Safari）中被忽略或引发基线偏移
示例：select { padding: 10px 12px; font-size: 14px; border: 1px solid #ccc; box-sizing: border-box; } 比单纯设 height: 36px 更可预期。
覆盖内联样式必须提高特异性，不能只靠!important
很多框架（如 Ant Design、Element UI）或 JS 库会动态写内联 style="height: 32px"。仅用 select { height: 40px !important } 在某些浏览器（尤其是 Safari）下仍会被绕过。
- 优先用 ID + 类组合提升权重：
#form-item-123.select-custom { height: auto; padding: 11px 12px; } - 或用属性选择器锚定行为：
select[multiple] { padding: 8px 12px; } -
!important仅作为兜底，不建议全局滥用
移动端和高 DPR 屏需额外防“1px 边框变粗”干扰高度
在 iPhone 或 macOS Retina 屏上，border: 1px 实际渲染为 2–3 物理像素，这会让 select 视觉高度莫名增加，尤其当它嵌在紧凑布局中时。
- 若要视觉上保持“细边框”，改用伪元素模拟：
select::after+transform: scaleY(0.5) - 更简单稳妥的做法：统一用
border: 0，靠padding和背景色区分边界 - 务必加
box-sizing: border-box，否则padding和border会叠加导致高度失控
真正难控的从来不是 height 值本身，而是你没意识到 select 是个系统级替换元素——它的高度由渲染引擎+操作系统共同拍板，CSS 只能温柔引导，不能强行命令。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
