button上设line-height常无效或错乱，因Firefox等浏览器在UA样式中强制line-height:normal，Chrome/Safari行为也不统一；它仅控制行框内文字位置，不参与盒模型高度计算，真实高度由height、padding、字体度量共同决定。
button上设line-height为什么没反应或高度错乱
因为绝大多数浏览器（尤其是 Firefox 和 Opera）对 button、input[type="submit"] 等表单控件的 line-height 有硬性限制：它们默认把 line-height: normal !important 写死在 UA 样式里，你写的 line-height 会被直接忽略。
Chrome/Safari/Edge 虽然支持，但行为也不统一——比如你设 line-height: 40px，它可能只影响文字基线位置，而不会改变按钮整体高度；实际高度仍由 height + padding + 字体大小共同决定。
- Firefox 下写
line-height: 50px完全无效，开发者工具里能看到 computed 值仍是normal - 即使生效，
line-height作用对象是“行框”，不是按钮盒子本身；它不参与盒模型 height 计算，只微调文字在行内的垂直位置 - 若同时写了
height和line-height，且未设box-sizing: border-box，padding/border 会额外叠加，导致最终高度超出预期
按钮高度到底由什么决定
按钮的真实高度 = height（如果显式设置） 或 2 × padding-top + font-size + 行距余量（如果没设 height）。这里的“行距余量”不是 line-height，而是浏览器根据字体度量（ascent/descent）自动预留的空间。
也就是说：line-height 对按钮高度没有直接控制权。它只在按钮内容为纯文本、且未被其他样式覆盖时，间接影响文字在可用空间内的视觉位置。
立即学习“前端免费学习笔记（深入）”；
- 显式设
height: 40px+padding: 12px 16px→ 实际内容区高 = 40px − 24px = 16px，此时line-height: 16px才可能让单行文字视觉居中 - 没设
height，只靠padding和font-size带出高度 → 按钮高度随字体渲染差异浮动，iOS Safari 和 Windows Chrome 可能差 2–3px - 用了自定义字体（如 Inter、SF Pro）→ ascent 值偏高，文字看起来“上浮”，此时调
line-height无法修正，必须换布局方式
什么时候 line-height 会让按钮变高得离谱
典型场景是误把 line-height 当作“整体高度控制器”来用，尤其在 flex 容器里嵌套按钮时。
例如父容器设了 display: flex; align-items: center;，按钮又写了 line-height: 60px —— 这时按钮内部行框被撑高，但 flex 仍按内容尺寸分配空间，结果按钮被拉高、文字却卡在顶部，视觉上像“多了一截空白”。
- 在
display: flex或display: grid容器中，line-height对子元素垂直对齐完全失效，align-items才是唯一有效手段 - 给按钮加了
vertical-align: middle，又配line-height→ 二者冲突，基线重新计算，高度不可预测 - 响应式中用
rem设置font-size，但line-height写成24px→ 缩放后行高固定，内容区比例失衡，小屏下文字贴底或溢出
真正可控的按钮高度方案
放弃用 line-height 控制按钮高度，改用明确的盒模型控制。这是最省调试时间的做法。
- 定高按钮：用
height+padding+box-sizing: border-box，文字居中交给display: flex; align-items: center; justify-content: center; - 不定高按钮：去掉
height，只设padding和font-size，用min-height防止过矮，文字居中用display: grid; place-items: center; - 兼容 IE11 的底线方案：
height+padding+line-height: normal+vertical-align: middle（仅对纯文本有效） - 绝对不要在 flex 按钮里再写
line-height—— 它不会帮你居中，只会让文字上下跳动
真正难处理的，是那些既要显示 iconfont、又要支持动态字号、还得在 iOS 和 Android 上像素级一致的按钮。这时候，line-height 是临时补丁，flex 是交付底线，而字体度量调试，往往才是最后卡住的那 1px。
