原生<select>的height和line-height无效，因弹出菜单由系统渲染，CSS无法控制；仅顶部选中区可通过padding或transform: scale()调整，真正统一下拉高度需用size属性或自定义组件。
原生 <select> 的高度“变形”不是样式写错了，而是你试图用 CSS 控制它本就不该被控制的部分——弹出菜单。真正可控的只有顶部选中区，其余全是系统级渲染，强行干预只会导致错位、截断、点不中。
为什么 height 和 line-height 会让下拉看起来“变形”
浏览器把 <select> 拆成两层：上层是可样式化的按钮区，下层是操作系统绘制的弹出菜单。你设 height: 32px，Chrome 可能只压缩按钮区，但点击后弹出的菜单仍按默认行高展开（通常 6–10 行），视觉上就是“上面矮、下面突然很高”，像被拉长变形。更糟的是，line-height 对 <select> 本身基本无效，设了也白设。
-
padding是唯一稳定影响按钮区高度的方式；设padding: 8px 12px比height更可靠 -
appearance: none只隐藏箭头，不改变弹出层渲染逻辑，别以为它打开了样式入口 - iOS Safari 强制最小触摸热区为
44×44px，硬压到28px就会点不中，表现为“点了没反应”，像失灵
用 transform: scale() 统一缩放时怎么避免视觉错位
这是最轻量的“统一高度”方案，但容易因坐标偏移导致下拉框和触发按钮错开，尤其在滚动后或嵌套定位容器里。
- 必须配
transform-origin: top center，否则缩放中心默认在元素中心，会整体下移 - 加
margin-top补偿上移量（比如transform: scale(1, 0.85)配margin-top: 4px） - 别对父容器设
overflow: hidden或overflow: auto，否则缩放后的下拉内容会被裁剪——这不是缩放的问题，是定位上下文被截了 - Chrome 120+ 会对缩放后的表单控件报可访问性警告，若需合规，得换自定义组件
自定义下拉组件里怎么防止高度“忽大忽小”
用 <div>+<ul> 模拟时，高度不稳定往往来自 JS 更新内容后未重置 DOM 状态，或 CSS 约束冲突。
立即学习“前端免费学习笔记（深入）”；
-
<ul>上设max-height和overflow-y: auto，但绝不能设height或min-height，否则内容增减时高度卡死 - JS 动态更新
<li>后，先执行dropdownUl.style.height = 'auto'清掉旧的内联高度，再读scrollHeight计算新尺寸 - iOS Safari 对
scrollHeight有微小延迟，用requestAnimationFrame包一层再读才准 - 别在
<ul>外层容器（如.dropdown）上设overflow，否则滚动条会作用于整个弹层，而不是仅内容区
真正难的不是让高度“不变形”，而是分清哪些高度你能动、哪些你根本动不了。原生 <select> 的弹出层永远游离在 CSS 之外，所有“调高度”的尝试，本质都是在按钮区做视觉妥协，或彻底放弃它另起炉灶。
