元素不支持line-height，因其为替换元素，行高由系统或UA样式控制；有效方案是用padding、height+box-sizing控制高度，或改用自定义下拉组件。
HTML下拉框的 line-height 无效，别白试了
直接说结论：<select></select> 元素本身不支持 line-height，设了也没用。浏览器会忽略它，因为 select 是替换元素（replaced element），其内部行高由系统控件或 UA 样式控制，CSS 的 line-height 对它不起作用。
真正能调“视觉行高”的两个有效方式
想让下拉选项看起来更舒展、文字居中、上下留白合理，得绕开 line-height，用以下方法：
- 对
<select></select>设置padding（最常用且兼容性好）：比如padding: 8px 12px;，既能撑开高度，又能让文字垂直居中 - 用
height+box-sizing: border-box精确控制整体高度，再配合padding调整内边距比例 - 对
<option></option>设置padding无效（多数浏览器不支持），但可在<select></select>上用appearance: none+ 自定义箭头 +background模拟，再包裹一层实现完全控制（需 JS 配合，属进阶方案）
Chrome/Firefox/Edge 下拉项高度不一致？这是正常现象
<option></option> 的渲染高度由操作系统和浏览器 UA 样式决定，无法用 CSS 统一设置。你看到的“行高差异”其实是：
- Chrome 和 Edge 默认用系统原生下拉菜单，
option高度不可控 - Firefox 在部分版本中允许有限度设置
height或padding，但行为不稳定，不建议依赖 - 移动端（iOS Safari、Android Chrome）几乎完全无视对
option的样式干预
所以，如果排版一致性是硬需求，必须放弃原生 select，改用基于 <div> + <code><ul><li></ul> 的自定义下拉组件（如用 react-select 或 Choices.js）。
立即学习“前端免费学习笔记（深入）”；
一个安全可用的 CSS 示例（兼容所有现代浏览器）
select {
height: 40px;
padding: 0 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
appearance: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
}
注意：appearance: none 移除了默认箭头，然后用 SVG 背景图替代，这样就能确保高度和内边距完全可控——但记住，这只是美化了选择器本身，下拉弹层仍不受控。
真正难的不是怎么设行高，而是接受「原生下拉框的弹出列表永远无法被 CSS 精确排版」这个事实。
