button上设line-height无效因浏览器UA样式强制line-height:normal!important；Chrome/Safari中仅影响文字基线，不改变按钮高度；应优先用padding+font-size控制高度，统一设置padding、font-size、border-width并注意vertical-align。
button上设line-height为什么无效或高度错乱
因为 Firefox、Opera 等浏览器在 UA 样式里对 button 强制设了 line-height: normal !important，你写的 line-height 会被直接忽略。Chrome/Safari 虽然部分支持，但只影响文字基线位置，不改变按钮整体高度——真实高度由 height、padding 和字体度量共同决定。
常见现象：line-height: 40px 在 Firefox 中 computed 值仍是 normal；在 Chrome 中按钮没变高，只是文字“浮”起来了。
实操建议：
- 不要依赖
line-height控制按钮高度，它不是为表单控件设计的尺寸控制属性 - 若需单行文字视觉居中，优先用
padding配合固定font-size，比如padding: 12px 20px; font-size: 14px; - 如果已设
height，确保内容区高度 =height - 2 * padding-top，再设line-height等于该值（仅限 Chrome/Safari 且需测试） - 含 SVG 图标的按钮，务必加
vertical-align: middle，否则图标下拉会抬高整体基线
padding-top / padding-bottom 单独调整导致按钮变高
单独加大 padding-top 或 padding-bottom 确实会让按钮变高，但容易引发垂直对齐偏移、文字贴顶、图标错位等问题——尤其当按钮内有图标+文字或不同字号混排时。
立即学习“前端免费学习笔记（深入）”；
根本原因：按钮高度 = 2 × padding-top + font-size + 浏览器预留行距余量，而这个“行距余量”由字体本身 ascent/descent 决定，无法被 line-height 统一修正。
实操建议：
- 统一用简写
padding: 10px 20px或padding: 12px 24px，避免单边设置 - 紧凑按钮（如工具栏）可用
padding: 4px 8px; font-size: 12px; line-height: 1;，但必须验证文字是否贴顶 - 文字多或换行场景，改用
min-height+padding，禁用height，让内容自然撑开 - 所有状态（
:hover、:disabled）保持 padding 一致，仅变更border-color或opacity
box-sizing: border-box 对 button 高度的影响有限
box-sizing: border-box 能让 width 包含 padding 和 border，但它不改变按钮高度的计算逻辑——高度仍由 padding + 字体渲染决定，height 属性优先级最高。
误区：以为设了 box-sizing: border-box 就能“稳住”按钮高度。实际上，它只解决宽度溢出问题，对垂直方向的渲染差异（如 iOS Safari 和 Windows Chrome 差 2–3px）无改善作用。
实操建议：
- 全局启用
* { box-sizing: border-box; }是好习惯，但别指望它修复按钮高度不一致 - 按钮高度不统一的主因是
padding值不统一、font-size不统一、border-width不统一——三者缺一不可 - 旧版 IE（IE6–7）不支持
box-sizing，若需兼容，必须显式设height和line-height（值相等） - 用开发者工具的 “Computed” 面板确认
box-sizing是否生效，别只看 Styles 面板
不同浏览器默认 padding 不一致怎么办
原生 button 在 Chrome 默认约 padding: 2px 6px，Firefox 更小，Safari 又不同。直接写 padding: 10px 是替换而非叠加，看似生效，实则掩盖了跨浏览器初始差异。
这会导致：同一份 CSS，在开发机（Chrome）看着正常，上线后（Firefox/Edge）按钮突然变矮、文字挤到边缘。
实操建议：
- 所有按钮样式必须显式重置
padding，例如button { padding: 10px 20px; }，不依赖浏览器默认值 - 用
appearance: none移除 UA 样式干扰（注意 Safari 需-webkit-appearance: none） - 移动端需额外保障最小点击区域：iOS 要求 ≥44×44px，Android ≥48×48px，可通过
min-height+padding达成 - 检查框架（如 Bootstrap、Tailwind）是否已预设
padding，避免重复覆盖；查文档确认btn-sm对应的padding值
实际项目里最常被忽略的是：按钮高度异常往往不是单一属性问题，而是 padding、font-size、border-width、vertical-align 四者未同步调整的结果。哪怕只漏掉 vertical-align: middle，SVG 图标就可能把整个按钮抬高 2px。
