input 和 button 垂直对齐失效的根源是 vertical-align 默认值不同、baseline 计算不一致，叠加换行空白符、box-sizing 差异及字体渲染差异；现代首选 display: flex + align-items: center，旧浏览器 fallback 用 display: table-cell；需重置 button 边框与内边距、统一 box-sizing 和 font-size。
input 和 button 垂直对齐失效的根源
不是 height 设一样就能对齐，而是 vertical-align 默认值不同、基线（baseline）计算逻辑不一致，加上换行产生的空白符、box-sizing 差异和字体渲染差异，共同导致视觉错位。哪怕都设了 height: 40px，Chrome 下 input 可能略高，Firefox 下 button 可能略低，偏差常在 1–2px。
用 display: flex + align-items: center 一劳永逸
这是现代项目首选方案，无需纠结 baseline，也不用重置一堆属性：
- 给包含
input和button的父容器加display: flex和align-items: center - 确保 HTML 中两个标签顺序合理（如按钮在右，则
input在前、button在后） - 移除所有影响布局的
float、vertical-align、margin-top等干扰样式 - 若需按钮等宽或输入框占满剩余空间，可对
input加flex: 1
兼容旧浏览器时的 fallback 方案
IE10 及以下不支持 Flex？改用 display: table-cell 更可靠：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器设
display: table; width: 100%（必须有宽度） -
input和button各自设display: table-cell; vertical-align: middle - 避免混用
inline-block+font-size: 0，后者在缩放或高 DPI 屏幕下易出间隙 - 务必统一
font-size和line-height，例如都设为font-size: 14px; line-height: 40px;
容易被忽略的细节
对齐问题常在看似“已解决”后复发，关键在三个隐性条件：
立即学习“前端免费学习笔记（深入）”；
-
button默认有border和padding，不同浏览器默认值不同，建议全局重置：button { border: 0; padding: 0; } -
input必须是box-sizing: border-box，否则height不含边框，而button多数浏览器默认就是border-box - HTML 源码中换行会生成空格字符，即使用了 flex，若父容器
font-size较大，仍可能在按钮左侧透出几像素缝隙——最稳写法是把两个标签写在同一行：<input><button></button>
