原生select在平板上无法真正适配高度，因height、max-height等CSS属性仅影响顶部按钮区，弹出菜单由系统控制；可靠方案是使用size属性（如size="4"）控制可见行数，或用div+ul+li自定义下拉实现精确控高。
原生 select 在平板上无法真正“适配高度”——你设的 height、max-height 基本无效，弹出菜单高度由系统控制，不是 CSS 能改的。要可靠适配，得换思路：要么用 size 属性控可见行数，要么彻底放弃原生，用 div+ul+li 模拟。
为什么直接给 select 设 height 在平板上失效
平板（尤其是 iOS Safari 和 Android Chrome）把 select 当作替换元素（replaced element），选中框和弹出菜单是两个独立渲染层：
– 你设 height: 48px 可能只压扁了顶部按钮区，点击后弹出的菜单仍按系统默认行高展开（iOS 常见 44px/行，Android 更高）；
– padding 和 line-height 对 option 完全无作用；
– appearance: none 只影响选中区外观，不触达弹出层。
size 属性是唯一可控的原生方案
它不依赖 JS，兼容性好（IE11+、所有平板浏览器都支持），且能稳定控制“可见选项数量”，适合表单简单、选项不多（≤10 项）的场景：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
size="4"表示强制显示 4 行option，超出部分自动滚动，高度由 UA 决定但相对一致 - 配合
multiple可多选，但注意移动端常忽略multiple，仅桌面端生效 - 别混用
size和height：Chrome 下size="1"+height: 48px会导致按钮区变形，弹出层仍高 - 若需统一视觉高度，可加
transform: scale(1, 0.85)+transform-origin: top center微调，但必须同步增大font-size防文字过小
自定义下拉（div+ul+li）才是真适配
当你需要：严格统一每项高度（如 48px）、支持 hover/键盘导航、选项超 15 条、或适配高对比模式时，必须走自定义路线。关键控制点在 ul 容器：
立即学习“前端免费学习笔记（深入）”；
-
ul必须设max-height（如max-height: 240px），不能设height或min-height，否则撑不开或截断 -
overflow-y: auto必须写在ul上，不是父级div，否则滚动条会套在整个弹层上 - 每项
li用display: flex; align-items: center; height: 48px精确控高，比line-height更稳 - JS 动态更新内容后，先清空
ul.style.height（设为'auto'），再读ul.scrollHeight获取真实高度 - iOS Safari 需包一层
requestAnimationFrame读scrollHeight，否则延迟导致高度计算不准
真正难的不是写几行 CSS，而是接受：原生 select 的弹出层高度根本不在你手里。平板适配的底线是——用 size 控行数，或用自定义方案接管全部尺寸逻辑。别在 option 上浪费时间加样式，它不会生效。
