ie6–8中button的padding:0无法清除默认内边距，需配合border:1px solid transparent、line-height、height等显式控制，并触发haslayout以确保渲染一致。
IE中button的padding: 0不等于视觉上“没内边距”
直接写 padding: 0 在 IE6–8 里根本压不住默认内边距，尤其 IE7 下按钮实际仍保留约 2px 6px 的 padding，文字紧贴边缘、点击热区变小。这不是你写错了，是 IE 的 user agent stylesheet 对 button 做了硬编码样式，且不响应简单的 padding: 0 覆盖。
实操建议：
- 必须搭配
border: 1px solid transparent—— 否则 IE7/8 会把 border 当作“不可见但占位”的东西，导致内容区进一步压缩或错位 - 显式设置
line-height（如line-height: 1.4），否则文字上下“飘”，在 IE8 中常被截断顶部 - 若按钮含图标，避免用 background-image + padding 挤出空间；IE6–7 不支持 SVG，且背景定位在 content-box 下极易偏移
box-sizing: border-box 在旧IE中基本无效
box-sizing: border-box 在 IE6–7 完全不识别，IE8 只有在标准模式下才部分支持，且对 button 元素修正极不稳定。你写了 width: 100px; padding: 6px; border: 1px，IE7 仍按 content-box 计算：总宽 = 100px + 12px + 2px = 114px。
实操建议：
- 放弃依赖
box-sizing，改用显式尺寸控制：设height: 28px+line-height: 28px（值相等），让 IE 统一按高度撑开 - 用
width包含 padding 和 border，例如：width: 100px; padding: 4px 12px; border: 1px solid #ccc;→ 手动确保内容区宽度 =100px - 24px - 2px = 74px - 对 IE6–7 加
display: inline-block; zoom: 1;触发 hasLayout，防止边框浮动或塌陷
兼容 IE8+ 的最小安全写法
现代项目若还需支持 IE8，不能只靠 CSS Reset 或 Normalize，它们通常只归零到 padding: 1px 6px，远不够“干净”。得手动覆盖并兜底。
推荐组合（可直接粘贴）：
button {
margin: 0;
padding: 0;
border: 1px solid transparent;
line-height: 1.4;
height: 28px;
font-size: 14px;
vertical-align: middle;
}
button::-moz-focus-inner { border: 0; padding: 0; } /* Firefox 专用，顺手清掉 */
@media screen and (min-width: 0) {
button { *width: expression(this.offsetWidth - 24 - 2); } /* IE7 星号 hack 回退 */
}
注意：*width 是 IE7 专属 hack，仅在怪异模式下生效；若页面已用 ，它不会触发，此时应改用条件注释引入独立 IE7 样式表。
移动端和旧IE混用时最容易漏掉的一点
很多项目在 PC 端用上述方案搞定 IE，一上移动端就翻车——不是因为 IE，而是因为 iOS Safari 在「模拟 IE 渲染」的双核浏览器（如老版 360、UC）里，既不支持 appearance: none，又残留系统按钮阴影和垂直内边距，padding: 0 依然无效。
这时真正起作用的，反而是最原始的：height + line-height + vertical-align: middle。其他所有 fancy 属性（比如 transform: scale()）在这些环境里要么失效，要么引发重绘抖动。
别指望一次写法通吃所有旧环境。IE 的按钮问题从来不是“设个 padding 就完事”，而是盒模型、渲染模式、UA 样式、hasLayout 四层嵌套的结果。漏掉任意一层，都会在某个角落突然冒出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
