ie11不识别display: grid，必须显式声明display: -ms-grid并手动换算行列索引、用margin模拟gap、将降级样式写在@supports外层，且@supports对ie11无效。

IE浏览器（尤其是IE11及以下）不识别现代CSS特性，直接写display: grid或gap会导致样式失效或错乱——这不是“没生效”，而是浏览器压根跳过整条规则。回退必须靠显式隔离，不能依赖自动降级。

用@supports做运行时特性检测（推荐给IE11+现代浏览器混合场景）

IE全系列都不解析@supports，所以把它当“开关”用：把回退样式放外面，增强样式包在里面。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 先写所有浏览器都认的Flex基础布局（包括IE10/11），比如display: -ms-flexbox + display: flex
• 再用@supports (display: grid)包裹Grid增强逻辑，IE会忽略整个块，现代浏览器则覆盖前面的Flex
• 注意：IE11虽支持@supports语法，但对display: grid的判断结果是false，实际行为等同于不支持
• 别在@supports块里混用IE专用属性（如-ms-grid-column），现代浏览器会报错或静默丢弃

.grid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

用条件注释加载IE专属CSS（精准控制IE8–IE11）

只有IE能解析<!--[if IE]>这类注释，现代浏览器完全跳过，天然隔离。

• 把IE专用回退样式单独抽成ie-fallback.css，避免污染主样式表
• 在HTML的</body>前引入：<!--[if IE]><link rel="stylesheet" href="ie-fallback.css"><![endif]-->

• IE10+需用

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！