font-size和line-height组合最有效：height对原生select无效，浏览器仅通过字体大小与行高自动撑开高度；option高度不可控，需用div+ul自定义实现。
直接设置 select 的 font-size 和 line-height 最有效
下拉列表（select）的高度不能靠设置 height 硬撑，尤其在 Chrome/Firefox 中会出错或被忽略；真正起作用的是其内部文字的排版参数。只要字体变大，浏览器会自动撑开容器高度——但前提是 line-height 与 font-size 匹配，否则会出现文字贴顶、截断或上下留白失控。
推荐做法：
-
font-size设为所需大小（如18px），不要只调height - 显式声明
line-height: 1.4或具体像素值（如line-height: 28px），避免浏览器默认行高干扰 - 加
box-sizing: border-box，确保 padding 不额外增加总高度 - 慎用
appearance: none：它虽能解锁更多样式控制，但会丢失原生下拉箭头，需手动补全，且 Safari 对它的支持仍不稳定
option 样式基本无效，别浪费时间调试
几乎所有主流浏览器（Chrome、Firefox、Safari、Edge）都禁止对 option 元素应用 height、padding、line-height 等布局属性。你写 option { font-size: 20px; } 可能生效，但 option { height: 40px; } 会被静默忽略——这不是 bug，是规范限制。
这意味着：
- 下拉展开后的选项高度，完全由
select的font-size和系统渲染引擎决定，无法单独定制每个option - 想统一视觉高度？只能通过调整
select自身的字体大小 + 行高，间接影响展开态 - 若必须精细控制选项高度（比如做自定义下拉组件），得放弃原生
select，改用div+ul/li模拟，并接管键盘导航和焦点逻辑
移动端字体缩放导致下拉高度突变，怎么稳住？
iOS Safari 和部分 Android 浏览器在用户双指放大页面后，会强制放大表单控件（包括 select），导致字体突然变大、高度失衡，甚至触发 viewport 缩放。这不是 CSS 没写对，而是浏览器的可访问性策略。
缓解方式有限但实用：
- 在
select上加-webkit-text-size-adjust: 100%（仅限 Safari），阻止字体被强制放大 - 禁用用户缩放不是好办法，但若业务强要求，可在
中设user-scalable=no（注意 WCAG 可访问性风险） - 用
rem配合根元素动态计算字体大小时，记得在select上用font-size: 1rem而非固定px，否则缩放后与其他元素脱节
字体加载延迟让下拉高度跳变，怎么防抖？
当使用 Google Fonts 或自定义 Web Font 时，select 初始可能用系统默认字体渲染（小而紧凑），等网络字体加载完成再重绘（变大、高度突增），造成 UI 抖动。
关键应对点：
- 给
select设置一个合理的min-height（例如min-height: 44px），基于目标字体加载后的预期高度设定 - 配合
font-display: swap确保字体加载期间先显示备用字体，减少重排幅度 - 避免在
@font-face中省略font-weight或font-style声明，否则浏览器可能因匹配失败回退到奇怪的字体变体，进一步扰乱高度
字体大小和高度的联动比看起来更脆弱——select 是少数几个「样式受制于系统渲染层」的 HTML 元素，很多 CSS 规则只是表面生效。真正稳定的做法，是接受它的约束边界，用 font-size + line-height + min-height 组合去引导，而不是对抗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
