box-sizing: border-box不能修复ie6–8按钮内边距问题，因ie6–7完全不支持该属性，ie8仅标准模式下部分支持且对button极不稳定；须改用padding:0+border:1px solid transparent+line-height/height显式控制。
box-sizing: border-box 不能直接修复 IE6–8 的按钮内边距问题，它在这些旧浏览器中基本无效或行为不可靠。
为什么 box-sizing 在旧 IE 中对 button 失效
IE6–7 完全不识别 box-sizing；IE8 只在标准模式下部分支持，且对 button 元素的尺寸计算极不稳定。你写了 width: 100px; padding: 6px; border: 1px，IE7 仍按 content-box 算总宽 = 100px + 12px + 2px = 114px —— 这不是 bug，是它的渲染引擎根本没执行该声明。
-
box-sizing是为统一现代浏览器盒模型设计的，不是为兜底旧 IE 的按钮样式 - 旧 IE 的
button默认内边距来自硬编码的 user agent stylesheet，padding: 0压不住，必须配合其他显式控制 - 即使强制触发 hasLayout（如
zoom: 1），box-sizing也不会因此生效
真正能起效的 button 内边距重置组合
针对 IE6–8，必须放弃“单属性覆盖”思路，改用多属性协同控制：
- 写死
padding: 0+border: 1px solid transparent：否则 IE7/8 会把无色边框当占位符，进一步挤压内容区 - 显式设
line-height（如line-height: 1.4）和height（如height: 28px），且两者值尽量相等，让文字垂直居中不被截断 - 加
display: inline-block; zoom: 1触发 hasLayout，防止边框浮动或塌陷 - 避免用
background-image+padding挤图标空间：IE6–7 不支持 SVG，背景定位在 content-box 下极易偏移
现代项目里怎么兼顾兼容与简洁
若需支持 IE8，不能只靠 Normalize.css 或全局 box-sizing —— 它们对 button 的重置通常只到 padding: 1px 6px，远不够“视觉归零”。
- 在 CSS Reset 阶段单独强化
button：button { padding: 0; border: 1px solid transparent; line-height: normal; height: auto; } - 再叠加 IE 条件注释或
@supports回退（IE8 不支持@supports，所以得用条件注释或独立 IE8 样式表） - 如果项目已放弃 IE8，可放心用
gap控制按钮组间距，但注意：gap 不解决单个 button 内部 padding 差异，它只管子项之间空隙
最常被忽略的一点：button 的内边距差异本质是 user agent stylesheet 的硬编码行为，不是 CSS 层面的“可覆盖样式”。你写的规则越依赖浏览器默认逻辑（比如只设 padding、不碰 line-height 和 border），在旧 IE 里就越容易失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
