如何通过设置box-sizing和调整line-height解决输入框高度在不同浏览器显示不一致的问题？

本文共计1008个文字，预计阅读时间需要5分钟。

直接给 `` 和 `` 同时设置 `box-sizing: border-box` 和 `line-height`，是目前最稳定、兼容性最好、无需 JS 干预的解决方案。其他依赖 `vertical-align` 或浮动排列的方式，在现代布局中已不再可靠。

为什么 box-sizing: border-box 是必须的

浏览器对 input 和 button 的默认 box-sizing 不一致：Chrome/Safari 中 button 默认是 border-box，而 input[type="text"] 默认是 content-box。这意味着同样写 height: 40px; padding: 8px; border: 1px solid，input 实际占用高度是 40 + 2×8 + 2×1 = 58px，button 却刚好是 40px —— 差值就出来了。

• 必须显式统一设为 box-sizing: border-box，否则任何后续调整都是在“修偏移”，不是治本
• 别只写 box-sizing: border-box，要带上前缀（尤其旧版 Safari）：-webkit-box-sizing: border-box、-moz-box-sizing: border-box
• 记得同时作用于 input、button、select、textarea —— 它们默认行为各不相同

line-height 比 height 更可靠

用 height 强制固定高，容易和字体渲染、行内替换元素（比如图标）冲突；而 line-height 控制的是行框（line box）高度，天然适配文字垂直居中，且能随 font-size 自动缩放。

• 推荐用无单位值，如 line-height: 1.5，而不是 line-height: 24px
• 确保 font-size 一致（比如都设 font-size: 16px），否则 line-height: 1.5 在不同字号下实际像素值会变
• 如果按钮里有图标或 SVG，需额外加 vertical-align: middle 对齐基线，但仅限该场景，不是通用解法

移动端点击区域放大不能只靠 padding

在 iOS/Android 上直接增大 button 的 padding 或 font-size，会导致它比 input 高出几像素，align-items: stretch 反而把它往下压，视觉错位更明显。

立即学习“前端免费学习笔记（深入）”；

• 正确做法是用 transform: scale(1.2) 放大按钮视觉尺寸，但不改变其文档流尺寸
• 配合 transform-origin: center right，让缩放锚点落在右侧，避免遮挡 input 右侧边框
• 必须加 touch-action: manipulation，否则 iOS 仍会有 300ms 点击延迟
• 别忘了 button 加 type="submit"，否则回车提交失效（2026 年仍有大量项目漏掉这点）

容易被忽略的细节：button 默认 outline 和 border

button 的默认 outline（聚焦时的虚线框）和 border（常为 2px）会叠加在你设置的样式上，尤其在 Safari 中，可能多出 1–2px 高度或左右错位。

• 统一清除：outline: none 或至少 outline: 0
• 显式重置 border，例如 border: 1px solid #ccc，并注意 input 和 button 的 border-left 是否需要合并（常见搜索框场景）
• 若使用 appearance: none，需同步处理各浏览器前缀（-webkit-appearance, -moz-appearance），否则某些安卓 WebView 仍保留原生样式

真正麻烦的从来不是「怎么写」，而是「哪些地方必须同步改」——只要漏掉 button 的 box-sizing，或忘记重置它的 outline，哪怕其他都对，高度差依然会出现。这类问题往往在 Chrome 看着正常，一到 Safari 或旧版 Edge 就露馅。