线性渐变垂直移动边框动画IE浏览器兼容问题求助

嘿，我刚好之前踩过类似的IE兼容性坑，来给你支几招！

首先得明确IE的核心痛点：它对CSS border-image 结合动画的支持特别拉胯，而且原生线性渐变的动画逻辑在IE里也有不少限制——你当前的实现应该是用了渐变边框加动画的组合吧？这在IE里基本跑不起来。

下面给你两个可行的解决方案，优先推荐第一个：

方案一：伪元素模拟边框+背景渐变动画 #

这种方法兼容性覆盖IE10+，效果也更流畅：

body { 
  background-color: black; 
} 
.border-main { 
  position: fixed; 
  right: 0%; 
  left: 0%; 
  top: 0%; 
  bottom: 0%; 
  width: 75%; 
  height: 60%; 
  max-height: 70vh; 
  max-width: 140vh;
  /* 给边框预留空间 */
  padding: 2px;
  position: relative;
  background-color: black; /* 覆盖伪元素中间区域，模拟边框效果 */
}
/* 用伪元素承载渐变动画 */
.border-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #ff0000, #00ff00, #ff0000);
  background-size: 100% 300%; /* 让渐变高度足够支撑滚动动画 */
  z-index: -1; /* 放在容器后方 */
  animation: borderScroll 3s linear infinite;
}
/* 兼容IE10/11的动画前缀 */
@-ms-keyframes borderScroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}
@keyframes borderScroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}
.border-main::before {
  -ms-animation: borderScroll 3s linear infinite;
}

原理很简单：把渐变背景放在伪元素里，通过移动background-position实现垂直滚动，容器自身的背景色覆盖中间区域，就模拟出了渐变边框的动画效果。

方案二：IE专属滤镜模拟渐变动画 #

如果需要兼容IE9及以下，可以试试IE特有的filter属性，但效果会打折扣：

.border-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* IE线性渐变滤镜 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#00ff00', GradientType=0);
  /* 用IE动画滤镜实现滚动（效果较生硬） */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#00ff00', GradientType=0)";
}

这种方法的动画流畅度远不如方案一，仅作为极端兼容场景的备选。

最后再提几个IE兼容性细节：

• IE9及以下不支持vh单位，若要兼容得用JS动态计算容器尺寸；
• 所有动画必须加上-ms-前缀，IE10/11才能识别；
• 绝对避免border-image结合动画的写法，IE对这个组合的支持几乎为零。

希望这些方法能帮你搞定问题！

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