旧版ie中button边框撑宽是因默认content-box盒模型导致padding/border额外增加宽高；ie6–7不支持box-sizing，ie8仅标准模式下部分支持且不稳定；实操需显式设height/line-height、统一padding/border并手动计算内容区宽度，对ie6–7用haslayout hack，还需注意vertical-align、双核浏览器模式及fieldset等细节影响。
旧版IE中button元素边框撑开宽度的典型表现
在 IE6–8 里，<button></button> 默认使用 box-sizing: content-box，但它的默认 padding 和 border 会额外增加元素总宽高，导致布局错位——尤其当按钮被设为固定宽度（比如 width: 100px）时，实际占位可能变成 100px + 2×padding + 2×border。
为什么直接写 box-sizing: border-box 不一定生效
旧版 IE（特别是 IE7 及以下）不识别 box-sizing 属性，即使加了前缀（如 -ms-box-sizing）也无效；IE8 支持 box-sizing，但仅限于标准模式（ 必须存在），且对 <code><button></button> 的盒模型修正不稳定。
- 必须确保页面触发 IE8+ 的标准渲染模式，否则即使写了
box-sizing也会退回到怪异模式下的 content-box 行为 -
<button></button>在 IE 中还受font-size和line-height隐式影响，光调box-sizing不够 - 部分老项目用了 reset.css，可能重置了
button的padding却没统一box-sizing，反而放大错位
兼容旧版浏览器的实操方案
核心思路：不依赖 box-sizing，改用显式尺寸控制 + 重置默认行为。
- 给
button显式设置height和line-height（值相等），避免 IE 对内联替换元素的高度计算偏差 - 统一
padding和border，并用width/height包含它们，例如：width: 100px; padding: 4px 12px; border: 1px solid #ccc;→ 实际内容区宽度 =100px - 2×12px - 2×1px = 74px - 对 IE6–7 增加条件注释或 hack，强制
display: inline-block; zoom: 1;触发 hasLayout，防止边框浮动 - 若必须用
box-sizing，只针对 IE8+，并搭配*width: calc(100px - 24px - 2px);（星号 hack）给 IE7 回退
验证与容易忽略的细节
错位常在混合布局中暴露：比如按钮和 input 并排、或放在 flex 容器里（旧版 IE 不支持 flex）。不要只测单个按钮，要测它在真实容器中的表现。
- IE8 下
button的vertical-align默认是baseline，和 input 对不齐，需显式设为middle或top - 某些国产双核浏览器（如老版 360、QQ 浏览器）可能以 IE7 模式渲染，需检查 UA 和文档模式
- 如果按钮含图标（
<svg></svg>或背景图），旧 IE 不支持 SVG，且背景图定位会因 padding/border 计算偏差而偏移——此时更推荐用background-position: center+padding留白而非依赖盒模型
真正难的不是加一行 box-sizing，而是确认整个按钮链路（HTML 结构、reset 规则、父容器 display 类型、是否嵌套 fieldset）在各版本下都保持一致。多一个 fieldset 就可能让 IE6 多出 2px 边框溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
