size属性不控制下拉弹层高度，仅决定渲染模式：size="1"为点击展开的单行下拉，size≥2则渲染为始终展开的多行列表框；移动端webkit内核强制忽略size>1，需用自定义组件实现可控高度。
size 属性根本不能限制“下拉弹出层”的高度——它只决定 select 是以单行下拉按钮形式，还是以固定高度多行列表形式渲染。想控制展开后的弹层高度？size 对那个状态完全无效。
size 属性实际控制的是渲染模式，不是弹层高度
浏览器把 size="1"（或不写）和 size="4" 当作两种语义不同的控件处理：size="1" 是传统下拉（click 才展开），size="4" 则直接渲染成一个始终展开、带滚动条的列表框（类似 Windows 的 ListBox）。后者根本没有“下拉”动作，自然谈不上“限制下拉高度”。
- 写
size="5"但只有 3 个option→ 显示 3 行，剩下 2 行留空，不会自动收缩 - 写
size="0"、size=""或非数字值 → 浏览器忽略，回退为size="1" - 哪怕加了
style="max-height: 200px"，对原生下拉弹层也无效；它只可能截断多行列表模式下的可视区域（如果父容器 overflow:hidden）
移动端上 size > 1 基本失效
iOS Safari、微信内置浏览器（WKWebView）、QQ 浏览器等所有 WebKit 内核环境，会静默忽略 size 值大于 1 的设置，强制还原为原生单行选择器——你写的 size="4" 在 iPhone 上打开，看到的仍是点击才弹出的系统级选择面板，且无法用 CSS 调整其样式或高度。
- 这不是 bug，是平台策略：移动端优先保障触控体验和系统一致性
- 加
multiple也无法绕过，WebKit 会一并降级 - 若必须在 iOS 上实现固定行数列表，只能用
div+aria-listbox自定义，或引入轻量级下拉库（如 Choices.js）
真正想限制下拉弹层高度，得换思路
原生 select 的弹出层高度由操作系统或浏览器引擎控制，HTML/CSS 无标准接口干预。可行路径只有两条：
- 放弃原生
select，用div模拟下拉：监听 focus/blur，用ul/li渲染选项，配合max-height+overflow-y: auto精确控制弹层高度 - 对原生
select做“伪交互”：用onmousedown临时增大size，onblur或onchange立即设回size="1"—— 这只是视觉欺骗，弹层本身仍不可控，且在移动端同样失效 - 注意：给
option设height或line-height无效，绝大多数浏览器忽略这些样式
最易被忽略的一点：很多人调试时发现 size="3" 没反应，第一反应是代码写错，其实更可能是父容器设置了 overflow: hidden，或者在 iOS 环境下直接被无视了——先确认运行环境，再查代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
