必须加前缀的浏览器版本包括：chrome 9–22 和 safari 5.1–6.0 需 -webkit-box-sizing，firefox 4–15 需 -moz-box-sizing，ie8 需 -ms-box-sizing；现代项目若最低兼容 ie9+/chrome 23+/firefox 16+，可直接使用无前缀 box-sizing: border-box。
需要加前缀，但只在明确支持旧版浏览器时才必须加；现代项目若最低兼容 IE9+/Chrome 23+/Firefox 16+，可直接用无前缀 box-sizing: border-box。
哪些浏览器版本必须加前缀
加前缀不是“为了兼容所有老浏览器”，而是针对特定断代版本的硬性要求：
-
Chrome 9–22和Safari 5.1–6.0：只认-webkit-box-sizing，写box-sizing会被忽略 -
Firefox 4–15：只认-moz-box-sizing；Firefox 16+才支持无前缀 -
IE8：必须写-ms-box-sizing；IE9+原生支持无前缀 -
Opera 10.1–12.1（Presto 内核）：需-o-box-sizing，但该内核已于 2013 年弃用，现基本可忽略
实际项目中怎么写才安全又不冗余
不要盲目堆砌全部前缀。关键看你的目标浏览器范围：
- 若需兼容
Firefox 15或Chrome 20这类已淘汰但内部系统仍在用的版本：必须同时写三行-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; - 若用
Autoprefixer，检查配置是否禁用了ie >= 8或firefox >= 15—— 它可能自动删掉-moz-，导致 Firefox 15 崩溃 - 全局重置常用写法：
* { box-sizing: border-box; }在 IE8 下会失效，必须补* { -ms-box-sizing: border-box; }
Flex/Grid 里设了 box-sizing: border-box 为什么还是溢出
这不是兼容性问题，而是布局机制误解：
-
Flex分配空间时，先按content-box解析子项的width，再应用box-sizing调整内容区 —— 也就是说，box-sizing不改变 Flex 的尺寸分配逻辑，只影响最终渲染 -
Grid的grid-template-columns是轨道定义，不会因子项的padding或border自动重算；设200px就是 200px，哪怕子项用了border-box+padding: 30px，视觉上也会撑出轨道 - 常见错误现象：
flex: 1的子项加了大padding后，旁边固定宽元素被挤窄 —— 实际是 Flex 剩余空间计算未考虑 padding 占位，不是box-sizing没生效
真正容易被忽略的是：全局 * { box-sizing: border-box } 会污染 <svg></svg>、<input type="range">、<select></select> 等原生控件，它们在某些浏览器中依赖 content-box 行为来对齐或缩放。别图省事一刀切，该局部覆盖时就用 input, select, svg { box-sizing: content-box; }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
