IE10以下不支持display: grid，需彻底替换为float或display: table布局；清除浮动须用伪元素+zoom兼容旧IE；table-cell禁用margin，改用border-spacing或padding；须JS检测并切换降级样式。
IE10以下不支持display: grid，必须换布局模型
旧版IE（尤其是IE9及更早）对CSS Grid完全无支持，连@supports (display: grid)都会直接忽略。这时候硬加Grid样式等于没写，页面会塌成一坨。降级不是“加个fallback”，而是彻底换一套布局逻辑——float或display: table是仅有的两个能稳定控制多列等高、顺序排列的方案。
注意：IE10支持display: -ms-grid（旧草案语法），但和现代Grid不兼容，且无法和display: grid共存于同一选择器中，所以统一按IE9及以下处理更省心。
用float实现三栏自适应时，清除浮动必须写在容器末尾
常见错误是只给子项设float: left，却不处理父容器高度塌陷，导致后续元素上移、背景色断掉、边框消失。这不是“看起来差不多”，而是真实布局断裂。
-
overflow: hidden在IE6/7中不可靠，尤其当子元素有position: relative时可能触发hasLayout异常 - 推荐用伪元素清除：
.grid-container::after { content: ""; display: block; clear: both; }，IE8+支持；IE6/7需额外加.grid-container { zoom: 1; } - 每栏宽度建议用
%而非px，避免IE下盒模型计算误差（如box-sizing: border-box在IE7-不生效）
display: table在IE8+可用，但单元格不能设margin
display: table-cell能天然等高，适合标题+内容+侧边栏这类需要底部对齐的场景，但它在IE里有个硬限制：单元格之间不能用margin分隔，否则IE8会把margin渲染成空白行或错位。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：用
border-spacing（配合display: table父容器）或padding模拟间距 - IE8不支持
table-layout: fixed下的百分比列宽，列宽必须用width显式设定，或依赖内容撑开 - 避免嵌套
table-cell——IE下容易触发重绘异常，表现为滚动时内容闪烁或错位
媒体查询+条件注释已失效，得靠JS特征检测切样式
IE条件注释（如<!--[if lt IE 10]>）在IE10+已被移除，而现代构建工具基本不保留HTML条件注释。纯CSS方案走不通，必须用脚本判断并加载对应样式。
- 简单检测：
if (!window.CSS || !CSS.supports('display', 'grid')) { document.documentElement.classList.add('no-grid'); } - 然后写
.no-grid .grid-layout { display: table; }，避免污染主样式表 - 别用
document.write动态插入CSS——IE8下可能阻塞渲染；改用link标签异步加载降级CSS文件更稳妥
真正麻烦的不是写两套样式，而是当Grid里用了grid-template-areas这种声明式布局时，float或table根本没法语义对齐——这时候得在HTML结构上做妥协，比如提前把侧边栏放在DOM顺序前面，不然视觉顺序和读屏顺序就对不上了。
