设置相同 height 失效因 select 是替换元素，height 仅影响选中区，下拉菜单由系统绘制；推荐用 padding + box-sizing: border-box 精确控制可见高度，或彻底改用自定义组件实现真正等高。
给两个 <select> 设置相同 height 为什么经常失效
因为 <select> 是替换元素，浏览器只允许 CSS 控制其“选中区”（即你看到的输入框部分），而下拉弹出菜单由系统绘制，height 对它完全无效。你设了 height: 40px，可能只压扁了顶部区域，点击后弹出的菜单依然按默认行高显示 8–10 行——两个下拉框视觉上还是不一致。
用 padding + box-sizing 精确控制可见高度
这是最轻量、兼容性最好的方案：通过内边距撑开内容区，让文字垂直居中，同时避免依赖不可靠的 height。
-
padding比height更稳定，Chrome/Firefox/Edge 都能一致响应 - 必须加
box-sizing: border-box，否则padding会额外增加总高度 - 两个
<select>用同一套 class，比如：.uniform-select { padding: 8px 12px; box-sizing: border-box; font-size: 14px; } - 如果已有边框或背景色，注意
border宽度也参与总尺寸计算，需一并统一
用 transform: scale() 强制等高（慎用）
当两个下拉框原始尺寸差异大、又不想改结构时，可用缩放对齐。但这是视觉欺骗，不是真实尺寸控制，容易引发可访问性问题。
- 缩放会同时影响文字、边框和点击热区，iOS Safari 下可能点不中
- Chrome 120+ 会对缩放后的表单元素报 Lighthouse 警告：
form elements not scalable - 若必须用，建议仅用于同级 UI 组件微调，且补上
transform-origin: top center和margin-top补偿位移
真正等高的唯一可靠方式：放弃原生 <select>
如果你需要两个下拉在**所有状态（展开/收起/聚焦/高对比模式）下都严格等高**，就必须用自定义组件。此时高度、行高、滚动、键盘导航全部可控。
立即学习“前端免费学习笔记（深入）”；
- 用
<div>+<button>+<ul>模拟，两套结构共享同一套 CSS 尺寸规则 - 关键样式要统一：
max-height、line-height、padding、font-size - 别忽略移动端：iOS Safari 要求触摸热区 ≥ 44×44px，强行缩小会导致交互失败
- 高对比模式下，自定义菜单若没设
color和background，可能直接变透明
最容易被忽略的一点是：即使两个 <select> 的 CSS 完全一样，它们在不同操作系统（Windows/macOS/iOS）下的默认字体、行高、边框渲染仍存在细微差异。真要 100% 一致，只能走自定义路径。
