Question

以下CSS代码在IE和Edge中不起作用，但在Chrome和Safari中以及在iOS上都可以正常工作。

此处提供了一个演示：https://new-css-clip-text-reveal-mask.webflow.io/

有人在想如何使其在IE和Edge中正常工作吗？

.text-holder {
clip-path: inset(0px 0px 0px 0px);
-webkit-clip-path: inset(0px 0px 0px 0px);
}

Answer 1

已经解决了。两个累积的问题。 IE和Edge在flexbox上遇到了一些麻烦（用于使文本元素居中），而IE + Edge无法处理剪切路径：inset（）。我改用clip：rect（）。

代码和笔在这里：https://codepen.io/headstarterz/pen/BaaPKMN

clip-path: inset(0px 0px 0px 0px);
-webkit-clip-path: inset(0px 0px 0px 0px);
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS */
.text-holder {clip: rect(0,auto,auto,0);}
.text {display: block; width: 100%; text-align: center; vertical-align: middle; padding-top: 50vh;} 
}

@supports (-ms-accelerator:true) {
   /* Edge 12+ CSS */ 
.text-holder {clip: rect(0,auto,auto,0);}
.text {display: block; width: 100%;text-align: center; vertical-align: middle; padding-top: 50vh;} 
}

@supports (-ms-ime-align:auto) {
    /* Edge 16+ CSS */ 
.text-holder {clip: rect(0,auto,auto,0);}
.text {display: block; width: 100%;  text-align: center; vertical-align: middle; padding-top: 50vh;} 
}

文字显示滚动遮罩：如何获取剪切路径：inset（）在IE和Edge上工作

1 个答案: