ie7及以下完全不支持box-sizing属性，因其引擎未实现该特性，即使加前缀或在标准模式下也无效；必须放弃该属性，改用固定尺寸、calc回退、浮动布局及条件注释加载专用样式。
box-sizing 属性在 IE7 及以下版本中完全不被支持，任何写法都无效——这不是配置问题，而是浏览器引擎根本没实现该 CSS 特性。
IE7 及以下为何无视 box-sizing
IE6–7 使用怪异模式（Quirks Mode）解析 CSS，其盒模型行为是硬编码的：width/height 默认就包含 padding 和 border，但这个逻辑与 box-sizing: border-box 无关，也不响应该声明。你写的 box-sizing 在 DevTools 中会显示为灰色或带删除线，说明它压根没被解析。
- 即使加上
-ms-box-sizing前缀也无效——IE7 不识别该属性名 能强制 IE8+ 进入标准模式，但对 IE7 无影响- 伪元素、表单控件、
<button></button>等所有节点，一律跳过该规则
必须放弃 box-sizing，改用显式尺寸控制
真实项目中若仍需兼容 IE7，唯一可行路径是绕过盒模型抽象，直接算像素：
- 所有带
padding或border的块级容器，用width: calc(100% - 20px)手动减去左右padding和border总和（IE7 不支持calc()，所以得回退到固定值或百分比预留） - 浮动布局中，两列各设
width: 49%，再加margin-right: 2%，而非依赖box-sizing对齐 - 按钮、输入框等表单元素，必须重置
padding: 0+border: 1px solid transparent+height/line-height显式匹配 - 避免使用
display: table—— IE7 支持但有渲染 bug；优先用float+clear+ 手动宽度分配
条件注释是唯一可控的加载入口
不能把降级样式混在现代 CSS 文件里，IE7 会跳过整段含未知属性的规则，但会执行基础声明：
- 在 HTML 中用
<!--[if lt IE 8]><link rel="stylesheet" href="ie7-reset.css"><![endif]-->单独引入 -
ie7-reset.css里禁用所有box-sizing、@media、flex相关代码 - 只保留
float、zoom: 1、display: inline-block、固定width和height - 第三方组件（如 jQuery UI）需确认是否自带 IE7 兼容层，否则要手动覆盖其内部
.ui-button类的padding和border
真正难的不是写几行 CSS，而是确保每个动态插入的 DOM 节点、每个 iframe 里的子页面、甚至 SVG 中的 <foreignobject></foreignobject>，都不依赖 box-sizing 计算尺寸——IE7 下，你只能靠肉眼校验和像素级微调来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
