直接设height无法对齐按钮高度，因select是替换元素，浏览器将其拆为顶部“选中区”（部分响应height）和系统绘制的弹出菜单（css完全无效）；padding+box-sizing: border-box才是稳定对齐选中区的可靠方案。
为什么直接设 height 无法对齐按钮高度
因为 select 是替换元素，浏览器把它拆成两块：顶部“选中区”勉强响应 height 和 padding，但弹出菜单完全由系统绘制，CSS 穿不透。你设 height: 36px 后，button 看起来等高了，可一点击，下拉菜单还是默认撑开、文字挤在顶部、边框错位——这不是样式没生效，是根本不在同一渲染层。
用 padding + box-sizing: border-box 对齐选中区
这是最稳、无需 JS、兼容性覆盖 IE11+ 的做法，目标是让 select 的可视部分（不含弹出层）和 button 在视觉上一致：
-
padding: 8px 12px是常用起点，文字基本垂直居中；调高或调低 2px 可微调对齐感 - 必须加
box-sizing: border-box，否则border和padding会额外增加总高度 - 统一
font-size（如14px）、border（如1px solid #ccc）、line-height: normal（别设line-height，它对select无效） - 给
button也加同样的padding、box-sizing和字体设置，避免因默认line-height差异导致错位
用 transform: scale() 强制视觉缩放（慎用）
当 padding 调整后仍差 1–2px，且你确定不需要严格无障碍支持时，可用缩放微调：
-
transform: scale(1, 0.92)垂直压缩约 8%，再配transform-origin: top center防止上移 - 必须加
margin-top: 2px补偿缩放导致的偏移 - 同步加大
font-size（如从14px改为15px），否则文字变小难读 - Chrome 120+ 会对缩放后的
select报 “form elements not scalable” 可访问性警告，iOS Safari 可能因热区
真正对齐整个交互流程？得放弃原生 select
如果按钮点击后展开的下拉层也要和按钮“同高逻辑”（比如固定最大高度、滚动条位置一致、键盘导航对齐），原生方案必然失败。此时必须用自定义组件：
- 结构用
<div class="custom-select"> <button>...</button><ul><li>...</li></ul> </div> -
button和ul共享同一套padding、font-size、min-height，ul设max-height: 200px; overflow-y: auto - 隐藏原生
select（position: absolute; opacity: 0; pointer-events: none;），用 JS 同步值并监听change - 必须补
aria-expanded、aria-controls和键盘事件（ArrowDown/Escape），否则 Windows 高对比模式或读屏器下不可用
对齐高度这件事，难点不在代码多寡，而在接受一个事实：按钮是普通流内元素，select 的弹出层是脱离文档流的系统黑盒。你调得越用力，越容易踩进可访问性和移动端热区的坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
