IE浏览器中text-decoration-color失效，有无可行替代方案？

嘿，这个问题我之前帮不少开发者踩过坑——IE全系列都不支持text-decoration-color属性，不过咱们有几个经过实战验证的替代方案，分场景给你说说：

方案1：border-bottom模拟（单行文本首选） #

这是兼容性最好的方案，IE6及以上都能支持，操作也简单：把原生下划线去掉，用底部边框来模拟，还能调整下划线和文字的间距。

/* 替代 text-decoration: underline #ff0000; */
.custom-underline {
  text-decoration: none;
  border-bottom: 1px solid #ff0000;
  padding-bottom: 2px; /* 按需调整下划线与文字的距离 */
}

注意：这个方案只适合单行文本，要是多行的话，下划线会变成整行的长线条，和原生下划线的逐行效果不一样。

方案2：伪元素模拟（自定义样式首选） #

如果需要更灵活的下划线样式（比如加粗、虚线、偏移量），可以用伪元素来实现，兼容性覆盖IE8及以上：

.custom-underline-multi {
  position: relative;
  text-decoration: none;
}
.custom-underline-multi:after {
  content: '';
  position: absolute;
  bottom: -3px; /* 调整下划线的垂直位置 */
  left: 0;
  width: 100%;
  height: 2px; /* 下划线粗细 */
  background-color: #0066cc;
  /* 想要虚线的话就加：border-bottom: 2px dashed #0066cc; 替换background-color */
}

小技巧：如果是多行文本，这个方案默认还是整行下划线，要是想实现逐行效果，可以给父元素加上display: inline-block，不过效果可能不如背景渐变自然。

方案3：背景渐变模拟（多行文本首选） #

要是你需要支持多行文本的逐行下划线，背景渐变是最接近原生效果的方案，兼容性覆盖IE10及以上：

.custom-underline-gradient {
  text-decoration: none;
  background-image: linear-gradient(to bottom, transparent 90%, #2ecc71 90%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 100% 1px;
  padding-bottom: 1px;
}

这个方案的下划线会跟着每一行文字的长度走，和原生text-decoration的视觉效果几乎一致，唯一的缺点是IE9及以下不支持CSS渐变，要是需要兼容更低版本的IE，可能得结合JS或者降级到border方案。

额外提示 #

这些方案都能配合:hover、:active等伪类实现交互效果，比如鼠标悬停时改变下划线颜色，和原生链接的交互逻辑完全一致：

.custom-underline:hover {
  border-bottom-color: #000;
}

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