原生 select 无法真正统一整体高度，因弹出菜单由系统控制、CSS 不可穿透；仅顶部触发区可通过 padding + box-sizing: border-box 稳定控高，而 height 和 line-height 在各浏览器中表现不一致且基本无效。
原生 select 元素无法在不同浏览器中实现真正一致的“整体高度”，因为它的弹出菜单（popup）由操作系统或浏览器 UA 样式控制，CSS 完全不可穿透；能统一的只有顶部选中区（trigger area），且必须避开 height 和 line-height 这类无效属性。
为什么 height 在 Chrome/Firefox/Safari 中表现不一致
各浏览器对 select 的渲染策略不同：height 在 Chrome/Edge 中可能压扁按钮区但不影响弹出层，在 Firefox 中偶尔响应 padding，在 Safari（尤其 iOS）中常被完全忽略。更关键的是，line-height 对 select 基本静默失效，option 上设任何尺寸样式也无效。你看到 DevTools 里“生效”的 height，其实只是触发区变形，点开后菜单仍按系统默认行高（22–28px）撑开 8–10 行。
用 padding + box-sizing: border-box 稳定控制选中区高度
这是目前最轻量、兼容性最好、无障碍友好的方案，目标是让多个下拉框的视觉触发区对齐输入框或彼此等高：
-
padding: 10px 12px是常用起点，文字基本垂直居中 - 必须加
box-sizing: border-box，否则 border 和 padding 会额外增加总高度 - 配合
font-size: 14px和border: 1px solid #ccc，可快速统一视觉体量 - 避免单独设
line-height——它对select无作用，纯属干扰
用 size 属性控制可见选项行数（仅限桌面端）
size 是唯一跨浏览器原生生效的“限高”方式，但它改变交互模式：从点击弹出变为始终展开的多行列表：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
强制显示 4 行option，超出自动滚动，无需 JS - 移动端（尤其 iOS Safari）会无视
size，强制走全屏选择器，无法规避 - 设
size="1"可恢复为传统下拉，但此时height依然不可靠 - 慎用大值（如
size="20"），易在小屏上破坏布局流
放弃原生 select 才能真正统一下拉层高度
如果你的需求明确包含“弹出层固定显示 5 行、每行 32px、支持键盘导航和滚动”，就必须用 div+button+ul 重构：
-
ul上设max-height: 160px（5 × 32）和overflow-y: auto，而非外层容器 - 每个
li用height: 32px+display: flex; align-items: center精确控高 - 必须加
aria-expanded、aria-controls和 ArrowDown/Escape 键支持，否则 Lighthouse 报严重可访问性问题 - iOS Safari 要求触摸热区 ≥ 44×44px，不能只看视觉尺寸——用
min-height+padding代替硬设height
真正难的不是写几行 CSS，而是接受一个事实：所谓“一致高度”，不是让所有下拉框像素级相同，而是让用户在任何设备、任何辅助工具下，都能以相同方式展开、浏览、选择。原生控件的限制，恰恰在提醒你——当一致性成为刚需，就得主动放弃它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
