浏览器默认按vertical-align:baseline对齐inline/inline-block元素，因各类元素基线位置不同（如img底边、input下划线处），即使高度相同也会视觉错位；flex布局中需用独立容器设display:flex且align-items:center，而非全局设置。
为什么同排元素高度不一就自动错位
不是你写错了，是浏览器默认按 vertical-align: baseline 对齐所有 inline 和 inline-block 元素。而 baseline 的位置取决于内容：文字有基线，<img alt="HTML同排元素高度不一对齐怎么调？解决思路" > 的 baseline 在图片底边，<input> 的 baseline 在下划线处，<button></button> 又可能因图标字体 font-size 不同偏移——哪怕都设了 height: 40px，视觉上也必然一高一低。
flex 布局是唯一稳解，但必须用对地方
别把整个 <form></form> 或 <div> 设成 <code>display: flex，否则子项会跨行拉伸、Safari 下易塌陷。正确做法是：
- 每组需对齐的元素（比如
<label></label>+<input>、<input>+<button></button>）必须包进一个独立容器，如<div class="form-row"> <li>该容器设 <code>display: flex; align-items: center;，不是baseline，也不是flex-start - 避免给子元素单独设
margin-top或vertical-align，它们会和 flex 行为冲突 - 若需响应式宽度控制，用
flex: 0 0 120px给 label，flex: 1给 input，别用width+float -
<label></label>、<input>、<button></button>、<select></select>、<textarea></textarea>全部显式声明vertical-align: middle - 父容器禁用
line-height（或设为line-height: normal），否则会干扰 baseline 计算 - 确保所有元素
box-sizing: border-box已启用，且font-size一致（尤其 button 里用了 iconfont 时） - HTML 源码中相邻标签不能换行，或父容器加
font-size: 0再单独恢复子元素字号 -
<i></i>的font-size是1em，文字却是0.875rem→ 图标视觉偏高 - 按钮有
padding，图标没设height或line-height→ 盒模型高度不一致 - 用
white-space: nowrap但文字含word-break: break-all→ 单行假设失效 - 真正有效的写法：父容器
display: flex; align-items: center;，图标和文字各自作为 flex item，不再依赖 inline 对齐逻辑
兼容老浏览器时 vertical-align 还能用，但要全量统一
IE10 及以下不支持 flex？那就退回到 vertical-align 方案，但必须满足三个硬条件：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
图片/图标和文字并排时最易踩坑
常见错误是只给 <i></i> 加 vertical-align: middle，却忘了它和旁边文字是不同 font-size 的两个 inline 元素：
立即学习“前端免费学习笔记（深入）”；
display 类型，或者加了 position: absolute、min-height、line-height 等任意一项，错位立刻重现。flex 容器能屏蔽大部分干扰，但它的作用域仅限于直接子元素——这点最容易被忽略。
