原生 select 的 height 在 Chrome/Firefox/Safari 上表现不一，因其弹出菜单由系统 UI 渲染，CSS 无法穿透；用 padding + box-sizing: border-box 控制可见高度最稳定；真要统一弹出层高度需放弃原生 select，改用自定义组件并兼顾可访问性。

直接设 height 为什么在 Chrome/Firefox/Safari 上表现不一

因为 select 是替换元素，浏览器只允许你“压扁”顶部选中区，但弹出菜单由系统 UI 渲染，CSS 完全穿不透。Chrome 和 Edge 会把 height: 40px 解析成压缩按钮区，Firefox 可能略留白，Safari（尤其 iOS）基本忽略该声明，导致视觉高度浮动 ±6px。更麻烦的是，line-height 对 select 无效，padding 在各引擎里对文字垂直居中的影响也不一致。

用 padding + box-sizing: border-box 控制可见高度最稳

这是目前跨浏览器兼容性最好的视觉统一法，不依赖渲染黑盒，只调整可样式化部分：

• 必须写 box-sizing: border-box，否则 border 和 padding 会额外撑高
• padding: 10px 12px 是常用起点，文字在 Chrome/Firefox/Safari 桌面端基本垂直居中
• 同步设置 font-size: 14px 和 border: 1px solid #ccc，避免字体缩放或边框差异引入偏移
• 加 appearance: none 和 -webkit-appearance: none 剥掉系统箭头，再用背景图或伪元素补右箭头，否则 Safari 右侧留白不一致

移动端和高对比模式下容易被忽略的硬约束

iOS Safari 要求触摸热区 ≥ 44×44px，强行用 transform: scale(1, 0.7) 把 select 压矮会导致点不中；Windows 高对比模式下，若没显式声明 background-color 和 color，整个下拉框可能变透明或纯黑。这些不是边缘情况——上线后真实被用户投诉过。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

真要统一弹出层高度？只能放弃原生 select

如果你的需求是“所有下拉菜单展开后都显示恰好 5 行、每行 32px、支持滚动”，原生控件做不到。唯一可靠路径是自定义：

立即学习“前端免费学习笔记（深入）”；

• 结构用 <div class="custom-select"><button></button><ul></ul></div>
• ul 上设 max-height: 160px（5 × 32）+ overflow-y: auto
• 每个 li 设 height: 32px + display: flex; align-items: center 确保单行精准
• 保留原生 select 作降级和表单提交后备，用 JS 同步 value 并监听 change
• 必须补 aria-expanded、aria-controls 和键盘导航（ArrowDown/Escape），否则读屏器不可用

真正难的不是让几个像素对齐，而是接受：原生 select 的弹出层是操作系统级组件，你调的只是它的“门脸”。想控制里面，就得自己搭门、装锁、配钥匙。