如何为不兼容浏览器（如IE）设置CSS回退样式，避免覆盖现代浏览器原有样式

嘿，这个IE兼容的问题我太熟了，之前帮好几个开发者搞定过。你想要的「只给IE加回退，不影响现代浏览器」的效果，有几个非常靠谱的方案，我给你拆解清楚：

方案1：用IE专属条件注释（精准定向IE） #

这是最直接的“专属投喂”方法，只有IE会识别这种特殊注释，现代浏览器直接忽略。你可以在HTML的</body>标签前，或者原有CSS的后面，加一段IE专属的样式：

<!--[if IE]>
  <style>
    /* Grid布局回退 */
    .grid { display: inline-block; }
    .grid__item { width: 50%; }
    /* 菜单栏修复：根据你的Logo宽度调整margin，比如Logo宽200px */
    .menu-container { margin-left: 220px; }
  </style>
<![endif]-->

如果你的回退样式比较多，也可以单独写一个ie-fallback.css文件，用条件注释引入：

<!--[if IE]>
  <link rel="stylesheet" href="./ie-fallback.css">
<![endif]-->

这种方式完全隔离了IE和现代浏览器的样式，绝对不会出现覆盖问题。

方案2：用CSS @supports做特性检测（推荐给现代浏览器+IE11） #

@supports是CSS的特性查询语法，所有现代浏览器都支持，但IE全系列都不认识它。我们可以利用这个特性，把现代浏览器的Grid样式放在@supports块里，回退样式写在外面：

/* 先写所有浏览器（包括IE）都会读取的回退样式 */
.grid { display: inline-block; }
.grid__item { width: 50%; background-color: #e8eaf6; }

/* 只有支持Grid的浏览器才会执行这里的样式，覆盖回退 */
@supports (display: grid) {
  .grid { 
    display: grid; 
    grid-template-columns: 500px 500px; 
    grid-gap: 10px; 
    grid-column-gap: 100px; 
  }
  .grid__item { 
    width: auto; /* 重置回退的宽度，让Grid自己控制 */
    background-color: var(--violet-lighter); /* 用CSS变量 */
  }
}

逻辑很清晰：IE不认识@supports，只会应用前面的回退样式；现代浏览器支持@supports，会执行块内的Grid样式，完美实现样式隔离。

补充：你之前的写法为啥没生效？ #

你之前尝试的：

.grid { display: inline-block; /*IE fallback*/ display: grid; ... }

理论上IE应该保留display: inline-block（因为它不认识display: grid），没生效大概率是两个原因：

• 你用的是IE11：它对Grid有部分支持，但支持得非常差，可能尝试解析Grid属性时出了异常；
• 存在更高优先级的CSS规则：比如其他地方用了!important或者更具体的选择器，覆盖了这个display属性。

另外，你代码里用了CSS变量var(--violet-lighter)，IE完全不支持这个特性，所以得给IE单独写静态颜色值，就像上面方案2里那样。

内容的提问来源于stack exchange，提问作者FSDevie