求助：使依赖CSS变量的进度条在IE中生效的解决方案

问题根源 #

首先得明确：IE 完全不支持CSS自定义属性（也就是你用的--start-color这类变量），而且它对progress元素的样式定制规则和现代浏览器完全不一样，这就是你的代码在IE里失效的核心原因。

兼容解决方案 #

我们需要抛弃CSS变量，改用动态生成样式的方式传递颜色值，同时针对IE的progress伪元素做单独适配：

1. 完整代码实现 #

HTML

<div id="root">
  <progress id="customProgress" value="70" max="100"></progress>
</div>

CSS（兼顾现代浏览器和IE）

/* 现代浏览器基础样式重置 */
progress[value] {
  -webkit-appearance: none;
  appearance: none;
  width: 300px;
  height: 20px;
  border: none;
}

/* 现代浏览器轨道样式 */
progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 10px;
}

/* Firefox 轨道默认样式重置 */
progress[value]::-moz-progress-bar {
  border-radius: 10px;
}

/* IE 轨道专属样式 */
progress[value]::-ms-track {
  width: 300px;
  height: 20px;
  border: none;
  background-color: #eee;
  border-radius: 10px;
  color: transparent; /* 隐藏IE默认填充色 */
}

JavaScript（动态设置渐变，兼容IE）

// 自定义的渐变起始/结束颜色
const startColor = "#ff6b6b";
const endColor = "#4ecdc4";
const progressEl = document.getElementById("customProgress");

// 区分浏览器类型做适配
if (!document.documentMode || document.documentMode > 11) {
  // 现代浏览器：动态生成样式设置渐变
  const modernStyle = document.createElement("style");
  modernStyle.textContent = `
    progress[value]::-webkit-progress-value {
      background: linear-gradient(to right, ${startColor}, ${endColor});
      border-radius: 10px;
    }
    progress[value]::-moz-progress-bar {
      background: linear-gradient(to right, ${startColor}, ${endColor});
    }
  `;
  document.head.appendChild(modernStyle);
} else {
  // IE专属处理：使用IE支持的-ms-linear-gradient语法
  const ieStyle = document.createElement("style");
  ieStyle.textContent = `
    progress[value]::-ms-fill {
      background: -ms-linear-gradient(left, ${startColor}, ${endColor});
      border-radius: 10px;
    }
  `;
  document.head.appendChild(ieStyle);
}

2. 关键细节说明 #

• IE检测逻辑：通过document.documentMode判断是否为IE浏览器，IE11及以下会返回对应版本号，现代浏览器返回undefined。
• IE的progress样式限制：IE只能通过::-ms-track（轨道）和::-ms-fill（填充部分）两个伪元素定制样式，必须给::-ms-track设置color: transparent才能覆盖默认填充色。
• 渐变语法兼容：IE10+支持-ms-linear-gradient，所以我们用这个语法给IE适配渐变效果。

这样修改后，你的自定义颜色渐变进度条就能在包括IE10+在内的所有主流浏览器正常工作啦～

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