如何在IE及Edge中禁用CSS hover状态的transform: translate特性？

我明白你遇到的痛点了——用clip-path配合hover时的transform做了Logo的拆分动画，但IE和旧版Edge（EdgeHTML内核）不支持clip-path，导致悬停时显示异常，而且之前加的-ms-transform: none !important;没起作用。咱们来一步步解决这个问题：

问题根源 #

直接给伪元素的hover状态加-ms-transform无效，大概率是因为IE对伪元素hover的样式优先级处理有差异，或者浏览器本身对这种覆盖方式的解析不友好。更可靠的思路是只在支持clip-path的浏览器中启用hover动画，不支持的浏览器自动跳过。

最优解决方案：用@supports特性检测 #

这是现代CSS渐进增强的最佳实践，不需要针对特定浏览器写前缀，自动适配支持clip-path的环境：

修改你的CSS代码，把hover动画部分用@supports包裹起来：

.image {
  width:340px; 
  height:230px; 
  background-image:url(https://i.ibb.co/fDzZ6Sc/Logo.png); 
  background-size:0; 
  position:relative; 
}
.image:before, .image:after { 
  content:""; 
  position:absolute; 
  top:0; 
  left:0; 
  right:0; 
  bottom:0; 
  background-image:inherit; 
  background-size:cover; 
  transition:1s; 
}
.image:before { 
  clip-path:polygon(0 0, 32% 0 ,32% 19%, 97% 100%, 0 100%); 
  -ms-clip-path: none; /* IE不支持clip-path，直接设为none即可 */
}
.image:after { 
  clip-path:polygon(100% 0,32% 0,32% 19%,97% 100%); 
}

/* 只有支持clip-path的浏览器才会加载这段hover动画 */
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) or (-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
  .image:hover::before{
    transform: translate(-20px,-5px);
  }
  .image:hover::after{
    transform: translate(20px,5px);
  }
}

原理说明 #

• @supports会检测当前浏览器是否支持clip-path（包括webkit前缀的版本），只有支持的浏览器才会解析里面的hover动画样式。
• IE和旧版Edge不支持@supports，也不支持clip-path，所以根本不会加载这段hover动画代码，自然就不会出现异常的translate效果。
• 相比之前的-ms-transform: none，这种方式更简洁，不需要针对特定浏览器做样式覆盖，避免了优先级冲突问题。

备选方案：针对IE的条件注释（仅适配IE） #

如果你需要专门针对IE做兼容，可以在HTML中添加IE专属类，再通过类来禁用动画：

1. 修改HTML结构，添加IE条件注释：

<!--[if IE]>
<html class="ie-browser">
<![endif]-->
<!--[if !IE]>-->
<html>
<!--<![endif]-->

<div class="image"> </div>

2. 在CSS中添加覆盖样式：

.ie-browser .image:hover::before,
.ie-browser .image:hover::after {
  transform: none !important;
  -ms-transform: none !important;
}

这个方案只对IE生效，旧版Edge可以通过UA检测添加类似的类，但@supports方案更通用和推荐。

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