原生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 上浪费时间加样式，它不会生效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！