IE无法识别Media Query及Linear-Gradient覆盖背景图问题求助

我来帮你捋捋这两个老IE的兼容坑，都是前端老项目里常碰到的问题：

一、IE11及更早版本无法识别Media Query的解决方案 #

首先得明确：IE8及更早完全不支持CSS3 Media Query，IE9和IE10对Media Query的支持也有局限（比如不支持min-width/max-width以外的部分属性），IE11虽然支持大部分，但偶尔也会有奇怪的兼容性问题。这里给你两个靠谱的解决思路：

1. 使用Respond.js补全支持 #

Respond.js是专门为IE8及以下浏览器实现Media Query支持的轻量脚本，用法很简单：

• 先在页面中引入你的CSS文件（注意不能是跨域的CSS，Respond.js无法处理跨域资源）
• 然后在CSS之后引入Respond.js脚本：

<script src="respond.min.js"></script>

它会自动解析你的Media Query规则，并在IE8中模拟生效。不过要注意，Respond.js只支持min-width和max-width类型的Media Query，其他复杂规则可能无法处理。

2. 用IE条件注释单独写兼容样式 #

如果Respond.js满足不了需求，或者你需要针对老IE写完全独立的样式，可以用IE专属的条件注释单独加载样式表：

<!--[if lt IE 9]>
<link rel="stylesheet" href="ie-legacy-styles.css">
<![endif]-->

在ie-legacy-styles.css里，你可以直接写固定宽度、静态布局这类老IE能识别的样式，毕竟老IE用户基本都是桌面端，不需要太复杂的响应式逻辑。

二、实现渐变不遮挡背景图的方法 #

你碰到的问题是：老IE中-ms-linear-gradient会覆盖背景图，这是因为IE9以下不支持多背景属性，直接写background-image会把之前的背景图覆盖掉。这里给你两种可行的方案：

1. 用伪元素叠加渐变（推荐，兼容所有IE版本） #

给目标元素设置相对定位，然后用:before伪元素来承载渐变，这样渐变会作为一个独立的层叠加在背景图上方，不会覆盖原背景：

.target-element {
  position: relative;
  background: url('your-background-image.jpg') no-repeat center center;
  background-size: cover;
}

/* 针对IE的渐变伪元素 */
<!--[if lte IE 11]>
.target-element:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 用带透明度的渐变，让背景图能透出来 */
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none; /* 确保伪元素不干扰元素上的点击、hover等交互 */
}
<![endif]-->

如果要兼容IE8，把渐变换成IE8支持的filter语法即可：

<!--[if IE 8]>
.target-element:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* ARGB格式：前两位是透明度（4D=77%透明度），后六位是颜色 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4D000000, endColorstr=#00000000);
  pointer-events: none;
}
<![endif]-->

2. IE9+的多背景写法 #

如果你的项目只需要兼容IE9及以上，直接用CSS多背景语法，把背景图和渐变用逗号分隔（注意顺序：先写背景图，再写渐变，这样渐变会叠加在背景图上方）：

.target-element {
  background: url('your-background-image.jpg') no-repeat center center,
              -ms-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  background-size: cover;
}

这种写法更简洁，但只适用于IE9及以上的版本。

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