直接设 height 对 无效，因浏览器原生渲染保守且 box-sizing 默认为 content-box；需配合 border-box、显式 padding/border、line-height 一致及 appearance 封装才能跨平台控高。
为什么直接设 height 对 <select></select> 无效
浏览器对 <select></select> 的原生渲染高度控制非常保守，尤其是 Windows 下的 Chrome 和 Edge —— 即使你写了 height: 40px，它也可能被忽略或仅部分生效。根本原因不是 CSS 写错了，而是：box-sizing 默认是 content-box，而 <select></select> 的内边距、边框、甚至内部控件（如下拉箭头）在不同系统中占用空间方式不统一，导致最终高度不可控。
box-sizing: border-box 必须配合 padding 和 border 一起用
单独加 box-sizing: border-box 不会 magically 让 <select></select> 高度变准。它只是让后续的 height 计算包含你写的 padding 和 border，避免“越写越高”。实操时必须同步处理：
-
height设为你要的**总高度值**（比如40px） -
padding显式声明，上下值之和不能超过height减去border宽度（例如padding: 8px 12px，border: 1px solid #ccc→ 实际内容区高 = 40 − 2×8 − 2×1 = 22px） - 禁用默认的系统内边距干扰：某些浏览器会给
<select></select>加隐藏 padding，建议重置padding: 0.4em 1em这类相对值，比固定像素更稳 - 避免只设
padding-top或padding-bottom—— 单侧 padding 在部分 Safari 版本中会导致文字偏移
跨平台一致性的关键：用 line-height 辅助垂直居中
<select></select> 不是普通块元素，line-height 对它的文本行高有影响，但仅在单行显示时有效（即未展开状态）。如果你发现文字贴顶或下沉：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 确保
height和line-height**数值相等**（如都设为40px），可强制单行文本垂直居中 - 这个技巧在 macOS Safari 和 Windows Chrome 中表现较一致；Firefox 可能略有偏差，需加
vertical-align: middle - 不要对
<option></option>设line-height—— 它在下拉展开后基本无效，且可能触发渲染异常
真正可控的方案：用 appearance + 自定义容器封装
当项目要求严格一致（比如和旁边 <input> 高度完全对齐），原生 <select></select> 的局限就很明显了。此时应放弃纯 CSS 调整，转为：
- 用
appearance: none去掉默认样式，再手动加背景箭头、边框、圆角 - 把
<select></select>套进一个<div class="select-wrapper">，给 wrapper 设精确 <code>height和box-sizing: border-box - 将
<select></select>设为position: absolute; top: 0; left: 0; width: 100%; height: 100%，靠父容器兜底尺寸 - 注意：iOS Safari 对
appearance: none支持不稳定，需加-webkit-appearance: none并测试真机
复杂点在于，一旦封装，就得自己处理键盘导航、焦点样式、屏幕阅读器支持 —— 这些不是 box-sizing 能解决的，但却是真实项目里最容易被跳过的部分。
