原生 的高度无法通过 height 或 line-height 直接控制，因折叠态与展开弹层分离渲染；size 属性可实现多行静态列表控高，但丧失下拉交互；精确控制需 JS 自定义 DOM 模拟，并注意 z-index、overflow 和定位问题。
HTML <select></select> 的高度为什么改不了
直接给 <select></select> 加 height 或 line-height 在多数浏览器里没用——因为原生下拉框的展开部分（popup）和显示区域（control）是分离渲染的，CSS 只能影响「折叠态」的容器高度，无法控制下拉弹出层的高度或选项行高。
size 属性只能用于多选场景？不，它也能控高
给 <select></select> 加 size 属性（比如 size="4"）会让它变成“可见多行”的列表样式，此时每项高度由 line-height 和字体大小决定，整体高度就可控了。但注意：
- 这会强制显示为非下拉式（类似
<textarea></textarea>的静态列表），失去默认的点击展开交互 - 如果只想在展开时限制可见选项数量（比如最多显示 5 条），
size是唯一原生方案，但仅适用于不需要隐藏滚动条、且接受 UI 变更的场景 -
size值设为1等同于默认单选下拉，但此时 CSS 高度依然不可靠
真正可控的方案：用 JS + 自定义 DOM 模拟下拉
要精确控制「折叠态高度」+「展开态最大高度」+「选项行高」，必须放弃原生 <select></select>，改用 <div> + <code><ul></ul> + <li> 模拟。关键点：
- 折叠态用
height+overflow: hidden控制按钮高度 - 展开态用
max-height+transition控制下拉区域最大可见高度（比如max-height: 200px） - 每个
<li>设置固定line-height（如line-height: 36px），避免文字撑开高度 - 必须监听点击/失焦事件手动切换展开状态，原生
change事件不触发 - 记得加
aria-expanded和role="listbox"保证基础可访问性
Chrome/Firefox 下拉弹层高度被截断？检查 z-index 和父容器 overflow
自定义下拉展开后内容被裁剪，大概率不是高度设错了，而是：
立即学习“前端免费学习笔记（深入）”；
- 父级容器（比如
<header></header>或带overflow: hidden的<div>）把弹层剪掉了 <li>弹层的 <code>z-index不够高，被其他元素盖住（尤其在 Vue/React 组件嵌套深时） - 没给弹层设
position: absolute且未脱离文档流，导致受父容器transform或will-change影响 - 移动端 Safari 对
position: fixed弹层有特殊限制，建议统一用absolute+ 动态计算top
实际高度控制的关键不在“怎么设”，而在“在哪设”——原生下拉的弹出层永远游离于当前 DOM 层级之外，它的渲染上下文和你写的 CSS 不在一个盒模型里。
