直接设 height 对 失效因其为替换元素，选中框与弹出菜单渲染机制不同；chrome/edge 压扁按钮区但菜单仍按系统默认展开，各浏览器对 height/padding/line-height 响应不一致。
为什么直接给多个 <select></select> 设 height 会失效
因为 <select></select> 是替换元素（replaced element），它的可视区域（选中框）和弹出菜单（popup）由不同渲染机制控制。你设 height: 40px 可能只压扁了顶部按钮区，点击后弹出的选项列表依然按系统默认行高展开，Chrome/Edge 尤其明显。各浏览器对 height、padding、line-height 的响应不一致，Firefox 略宽松，Safari 和移动端基本忽略。
用 transform: scale() 统一缩放所有 <select></select>
这是最轻量、无需 JS、兼容性好（IE11+）的统一高度方案。它不改变 DOM 结构，只视觉缩放，适合“让所有下拉框看起来一样高”的场景。
-
transform: scale(1, 0.8)垂直方向压缩到 80%，水平不变 - 必须加
transform-origin: top center，避免整体下移 - 配合
margin-top补偿上移（如margin-top: 6px） - 记得同步调大
font-size或用em单位，否则文字变小难读
select.uniform-height {
transform: scale(1, 0.85);
transform-origin: top center;
margin-top: 4px;
font-size: 1rem; /* 避免缩放后文字过小 */
}
用 padding + box-sizing: border-box 精确控制可见高度
如果需要像素级一致（比如和输入框对齐），优先用 padding 而非 height。它能稳定撑开选中区，并让文字垂直居中，且各浏览器表现更接近。
- 设
height: 40px+box-sizing: border-box锁定总高度 - 再用
padding: 10px 12px控制内边距，留出文字上下空间 - 禁用原生箭头：
appearance: none+ 自定义背景图或伪元素，否则箭头位置会错乱 - 避免在
<option></option>上设样式——它几乎无效，尤其在移动端
select.uniform-height {
height: 40px;
box-sizing: border-box;
padding: 10px 12px;
appearance: none;
background: url("data:image/svg+xml,...") no-repeat right 12px center / 16px;
}
真正统一滚动高度和项数？只能放弃原生 <select></select>
如果你的需求是“所有下拉弹出层都显示恰好 5 行、每行 32px、支持滚动、高度完全一致”，原生控件做不到。因为弹出菜单高度由操作系统和 UA 样式决定，CSS 无法穿透。
- 多选场景下可用
size="5"强制显示 5 行，但仅适用于<select multiple></select>，且桌面端有效，移动端常被忽略 - 单选场景无等效属性；
size对单选无效 - 唯一可靠路径：用
<div> + <code><ul></ul>+<li>模拟，通过max-height+overflow-y: auto精确控制弹层高度 - 此时所有尺寸、行高、滚动行为完全可控，但需 JS 管理焦点、键盘导航（
ArrowDown/Enter）、aria-expanded等可访问性细节
最易被忽略的一点：即使你把所有 <select></select> 的 CSS 高度调得一模一样，用户点击后看到的弹出菜单依然可能一个高、一个矮——这不是 bug，是浏览器设计使然。
