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，仅在怪异模式下生效；若页面已用 <!DOCTYPE html>，它不会触发，此时应改用条件注释引入独立 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 四层嵌套的结果。漏掉任意一层，都会在某个角落突然冒出来。
评论(0)