ie6–7下button的padding不生效是因ua硬编码内边距优先级高于css，须用border:1px solid transparent+显式height/line-height+display:inline-block zoom:1协同控制。
IE6–7 下 button 的 padding 根本不生效，不是写错了
你写的 padding: 8px 16px 在 IE6–7 里大概率被忽略——不是选择器没命中，而是 UA 样式表对 button 使用硬编码内边距，CSS 层面的 padding 声明优先级低于它。开发者工具里看到的“Computed”值，90% 来自浏览器内置逻辑，不是你的样式。
实操建议：
- 必须搭配
border: 1px solid transparent：IE6–7 把无色边框当占位符，不写这句，padding: 0都压不住默认空隙 - 禁用
em/rem单位：UA 字体链在旧 IE 中极不稳定，padding: 1em可能算出 0px 或溢出 - 加
display: inline-block; zoom: 1：触发 hasLayout，防止边框浮动、文字贴顶或高度塌陷 - 不要信
* { padding: 0 }：通配符对button完全无效，UA 样式有更高特异性
IE8 中 box-sizing: border-box 行为不可靠，别依赖它
box-sizing: border-box 在 IE8 标准模式下仅部分支持，且对 button 元素尺寸计算极不稳定。你写了 width: 100px; padding: 6px; border: 1px，IE8 仍可能按 content-box 算总宽 = 114px —— 这不是 bug，是它的渲染引擎根本没执行该声明。
实操建议：
- 放弃单点修复，改用显式尺寸组合：
height: 28px; line-height: 28px; padding: 6px 12px; border: 1px solid transparent - 若必须兼容 IE8，用条件注释加载独立样式表，避免和现代 CSS 混淆
- 验证时打开 IE8 开发者工具，切到“Compatibility View”和“Standards Mode”分别测试，两者行为可能完全不同
IE 下 input[type="button"] 和 button 标签行为不等价
很多人用 input[type="button"] 替代 button 想绕开问题，但它的 UA 默认 padding、focus 样式、甚至 focus ring 渲染逻辑都和原生 button 不同。调试时容易误判，尤其在表单混合布局中（比如和 input[type="text"] 并排）会暴露对齐错位。
实操建议：
- 统一使用
button标签，避免混用；如需语义化表单提交，用type="submit"而非input - IE6–7 中
input[type="button"]的左右内边距会随文字长度动态增加，修复方式是加overflow: visible - 所有按钮统一设
vertical-align: middle，否则和同行input对不齐（IE8 默认 baseline）
现代项目里怎么安全放弃旧 IE 兼容
如果你已明确不支持 IE8 及以下，仍可能在 Safari iOS WebView 或某些国产双核浏览器（如老版 360）中遇到类似问题——它们常以 IE7 模式渲染，且对 button 的 UA 字体度量处理异常，导致额外空隙。
实操建议：
- 基础重置必须包含四条不可省略的规则：
button { padding: 8px 16px; border: 1px solid transparent; line-height: 20px; box-sizing: border-box; } - Flex 布局中若用了
flex: 1 0 0，Safari 会因未声明min-width: 0触发min-content保护，按钮意外撑宽——此时必须补min-width: 0 - 检查“Computed”面板时，重点看
padding是否来自你的规则，而非 “user agent stylesheet”，这是唯一可信依据
真正让 button 视觉一致的，从来不是调一个属性，而是 padding、border、line-height、box-sizing 四者锁定，缺一不可。旧 IE 的问题本质是 UA 硬编码行为，不是 CSS 可覆盖的样式，所以“写死数值 + 显式控制”比“试图继承或归零”更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
