box-sizing: border-box 在老旧后台模板中常因第三方库覆盖、内联样式、reset.css权重不足或ie兼容问题而失效；需通过computed面板验证，针对性处理伪元素、表单控件及低版本ie，并避免盲目全局!important。
直接写 box-sizing: border-box 在老旧后台模板里大概率失效——不是你写错了，而是它被覆盖、被忽略、或压根没生效。
为什么 computed 面板里还是 content-box？
老旧后台模板常见三类干扰源：第三方 UI 库（如 .layui-btn、.adminLTE .btn）、内联样式硬编码、以及 reset.css 末尾加载导致权重不足。尤其当模板用了 !important 覆盖默认样式，或在 <style></style> 标签里动态注入 CSS，你的全局声明可能根本没进渲染流水线。
- 打开 DevTools，选中错位元素，在「Computed」面板查
box-sizing值；若显示content-box，说明规则未命中 - 检查样式来源：是不是来自
layui.css或AdminLTE.min.css？这些文件常把box-sizing写死在具体选择器里，且带!important - 别只看 Elements 面板的“Styles”标签页——那里会显示所有匹配规则，但不反映最终计算结果
伪元素和表单控件必须单独处理
::before 和 ::after 不继承 box-sizing，而老旧后台大量依赖伪元素做图标、分割线、状态标记；<input>、<textarea></textarea>、<button></button> 在 IE8–10 中对 border-box 支持极不稳定，即使写了也回退。
- 必须显式声明：
*::before, *::after { box-sizing: border-box; }，且这条要放在所有 CSS 的最顶部（不是某个局部文件里） - 对表单控件单独加固：
input, textarea, select, button { box-sizing: border-box !important; }，!important在这里不是妥协，是必要兜底 - IE8 下
<button></button>还受line-height和font-size隐式影响，光调box-sizing不够，得补height和line-height显式值
旧版 IE（≤IE9）不能只靠 box-sizing
IE6–7 完全不识别 box-sizing；IE8 仅标准模式下部分支持，且对 <button></button> 等替换元素修正失败。此时必须放弃“统一盒模型”幻想，改用尺寸锚定法。
- 确保文档类型为
，否则 IE8+ 也会降级到怪异模式，<code>box-sizing彻底失效 - 对固定宽高的按钮/输入框，显式写：
width: 120px; padding: 6px 12px; border: 1px solid #ccc; height: 36px; line-height: 36px;，让内容区宽度 =120px - 24px - 2px = 94px - IE6–7 加
zoom: 1;触发 hasLayout，防边框浮动；必要时用条件注释加载独立 hack 文件
第三方组件错位别硬刷全局!important
Element UI、Layui、AdminLTE 等库内部结构深、选择器权重高，盲目加 * { box-sizing: border-box !important; } 可能破坏图标对齐、滚动条宽度、甚至弹窗阴影。
- 先定位真实渲染节点：比如 Layui 的下拉菜单实际是
.layui-dropdown-menu，就写.layui-dropdown-menu, .layui-dropdown-menu * { box-sizing: border-box; } - 避免污染全局：用 scoped style（Vue）或 CSS-in-JS 的主题注入层，把
box-sizing: inherit注入到组件根节点 - 如果用了 Webpack + postcss，确认
postcss-preset-env没把box-sizing误删——某些老配置会过滤掉非标准属性
真正卡住人的从来不是 box-sizing 本身，而是它在老旧模板里像幽灵一样：你以为它生效了，其实只有 70% 的节点被覆盖；你以为加了 !important 就稳了，结果伪元素和 <button></button> 仍在按 content-box 计算。动手前，先开 DevTools 看 Computed，比猜十次都准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
