原生 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 的弹出层是操作系统级组件，你调的只是它的“门脸”。想控制里面，就得自己搭门、装锁、配钥匙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
