应统一box-sizing: border-box、vertical-align: middle、font-family和font-size，并用flex容器包裹控件；select默认渲染差异大，强行设height易错位，需避免仅依赖height调整。
下拉菜单（select）和输入框（input）高度不一致怎么办
直接设 height 很容易错位，因为不同浏览器对 select 的内边距、边框、箭头区域渲染不统一。Chrome 和 Safari 下 select 默认带额外 padding，Firefox 可能忽略 box-sizing，导致即使写了 height: 36px，实际视觉高度也差 2–4px。
真正有效的做法是放弃“强行拉高”，转而统一基线和盒模型：
- 给所有表单控件（
input、select、textarea、button）加box-sizing: border-box和vertical-align: middle - 显式设置
font-family和font-size，避免selectfallback 到系统字体（如 macOS 的 San Francisco 会抬高文字基线） - 用
line-height: normal清掉父容器可能继承的异常行高 - 若仍差 1px，加
margin-bottom: -1px在select上微调（仅限已知浏览器组合，不推荐全局使用）
用 flex 包裹时 select 被撑宽或换行
select 是替换元素，其默认 min-width 行为比 input 更顽固，尤其在 flex 容器中不加约束时，会按内容宽度（比如选项文字最长项）撑开整行。
解决的关键不是限制 select 自身，而是控制它的 flex 行为：
立即学习“前端免费学习笔记（深入）”；
- 把
select放进display: flex的行容器里，和label同级（不要嵌套） - 给
select设flex: 1，同时加min-width: 0—— 这能防止它因内部文本过长而溢出 - 避免给
select设width: 100%：它会和 flex 的flex: 1冲突，导致计算异常 - 如果选项文字太长导致下拉箭头被截，用
text-overflow: ellipsis+white-space: nowrap控制显示，而非缩放容器
下拉箭头按钮（.combobox-arrow）和 input 右侧对不齐
这是最常被误写的场景：试图把按钮塞进 input 标签里，或者用 float 硬推——两者都违法且不可靠。
正确结构必须是包裹容器 + 绝对定位：
- 外层
div设position: relative和display: inline-block（保持内联流） -
input不设padding-right，留出空间给按钮；按钮用position: absolute; top: 0; right: 0; - 按钮高度必须和
input高度严格一致：height: 100%或显式写死（如36px），并设box-sizing: border-box - 如果按钮图标（如 ▼）上下偏移，别调
margin-top，改用transform: translateY(-50%)+top: 50%垂直居中
IE11 或旧版 Edge 下 select 对齐彻底失效
这些浏览器不支持 flex 对 select 的良好控制，且 vertical-align: middle 在 inline 模式下表现极不稳定。
兼容方案不是降级回 table，而是用最小侵入的 fallback：
- 用
@supports not (display: flex)检测，对旧浏览器启用display: table-cell布局 - 给整行容器设
display: table; width: 100%，label和select分别设display: table-cell; vertical-align: middle - 禁用
flex相关样式（如gap、align-items），避免层叠干扰 - 注意：这种 fallback 仅适用于固定结构表单，不能用于响应式换行场景
真正难的不是让它们“看起来对齐”，而是 zoom 到 125% 或 150% 时仍对齐——只有 flex + 显式 box-sizing + 统一字体环境能做到这点，其他方案都是临时补丁。
