直接设 height 对 select 无效，因其为替换元素，仅压缩按钮头而弹出菜单仍按系统默认行高渲染；padding 才是稳定调节选中区高度的方式，且兼容所有现代浏览器。
直接设 height 为什么没用
因为 <select> 是替换元素，浏览器把它拆成两部分渲染：顶部可点击的“选中区”和点开后独立绘制的系统级弹出菜单。你给 <select> 设 height: 40px，大概率只压扁了按钮头，弹出菜单依然按操作系统默认行高撑开（通常 8–10 行），文字挤在中间、上下留白不均，甚至被截断。
padding 是最稳的视觉高度调节方式
它能可靠撑开选中区，让文字垂直居中，且所有现代浏览器响应一致：
-
padding: 10px 12px是常用起点，配合font-size: 14px和box-sizing: border-box可快速对齐输入框高度 - 避免单独设
line-height—— 对<select>无效，Chrome/Firefox/Safari 全部忽略 - 别给
<option>加height或padding—— 渲染由系统接管，CSS 完全穿不透
想多看几行选项？用 size 属性，不是 height
size 是原生 HTML 属性，设了就生效，不用 JS 也能控制可见行数：
-
<select size="4">会强制显示 4 行<option>，整体高度自然撑开 - JavaScript 动态改写：
el.size = 5，比操作style.height可靠得多 - 注意副作用：这会让下拉框变成“静态列表式”，不再是点击弹出，移动端可能缩放异常或触摸热区变小
真要统一弹出层高度？必须放弃原生 <select>
只要需求里出现“固定显示 5 行”“每行 32px 高”“超出滚动且滚动条位置一致”，原生方案就到头了。这时候得用语义化自定义组件：
立即学习“前端免费学习笔记（深入）”；
- 结构用
<div class="custom-select"><button></button><ul></ul></div> - 把
max-height和overflow-y: auto明确加在<ul>上，而不是父容器 - 漏掉
aria-expanded、键盘导航（ArrowDown/Enter）、Escape关闭逻辑，iOS VoiceOver 或 Windows 高对比模式下就会不可用
最常被忽略的点：所谓“下拉列表高度”，其实是两个东西——前端可控的选中区高度，和系统级不可控的弹出菜单高度。强行用一个 CSS 属性去统一它们，只会触发兼容性雷区或可访问性警告。
