直接设置 option 的 height 或 line-height 无效，因其为浏览器强管控的替换元素；可控方案仅有 select 的 padding 和 font-size+height+box-sizing 组合；高要求场景需用语义化自定义下拉组件。

为什么直接给 option 设 height 或 line-height 没用

因为 option 是受操作系统和浏览器 UA 样式强管控的替换元素，绝大多数浏览器（Chrome、Edge、Safari、iOS Safari）完全忽略对其设置的 height、padding、line-height。你写 option { height: 40px; }，DevTools 可能显示样式已应用，但渲染毫无变化——这不是你的 CSS 写错了，是浏览器故意不执行。

真正能影响“选项视觉间距”的两个可控入口

既然 option 不可样式化，就得从外围入手。实际生效且兼容性好的路径只有两条：

• select 的 padding：增加上下内边距，让选中区文字垂直居中、视觉更舒展，间接提升“单行感知高度”
• select 的 font-size + height + box-sizing: border-box 组合：例如 height: 44px; font-size: 16px; padding: 12px 16px; box-sizing: border-box;，在 Firefox 和部分 Chromium 版本中能较稳定撑开可见区域

当必须统一所有浏览器的选项高度时，只能放弃原生 select

如果你的需求是：下拉弹出层里每项高度严格一致、支持 hover 背景、支持图标、支持键盘导航且无障碍达标——那原生 select 就不是解决方案，而是限制源。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 用 div + ul + li 模拟下拉结构，所有尺寸（line-height、padding、max-height）完全自由
• 关键要补全：用 aria-expanded 控制状态，用 tabindex="0" 和 role="combobox" 保可访问性
• 滚动控制必须落在 ul 上（max-height: 200px; overflow-y: auto;），不能设在 select 或父 div 上，否则 iOS Safari 会失效

容易被忽略的移动端雷区

iOS Safari 对原生 select 有最小触摸热区要求（约 44px × 44px），强行压缩 height 或 padding 会导致点不中；Android Chrome 则可能把缩放后的 select 视为不可缩放内容，在 Lighthouse 中触发可访问性警告。这些都不是 bug，而是平台规范。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！