:在伪元素在IE 11中不起作用之前

Question

这是代码在IE11中不起作用，在chrome和Mozilla中运行良好。 我正在尝试在悬停在div.border-green 上添加背景颜色，它在 IE 11 中失败

.border-green{
border-bottom: 5px solid #50BE87 !important;
display: block;
}
.border-green::before{
content: " ";
display: block;
background: linear-gradient(to top, #50BE87 59%, #6a7b886b 20%);   
visibility: hidden;
transition: all 450ms ease-out;
position: absolute;
opacity: 0;
left: 15px;
top: 0%;
height: 96%;
width: 91%;
z-index: 1;
}
.border-green:hover::before {
opacity: 1;
visibility: visible;
} 

Answer 1

Internet Explorer 不理解 RGBA 十六进制颜色代码(4 字节(。

如果删除透明度，则工作正常：

background: linear-gradient(to top, #50BE87 59%, #6a7b88 20%);

或者，您可以通过包含两行来创建一种混合。这似乎也有效：

background: linear-gradient(to top, #50BE87 59%, #6a7b88 20%);
background: linear-gradient(to top, #50BE87 59%, #6a7b886b 20%);

Chrome和Mozilla最终将采取第二条线。但是由于第二行在IE中失败，IE似乎回退到第一行。但是，我不确定这是否是一种安全的策略。

或者你可以只使用rgba功能。这在IE中也可以正常工作：

background: linear-gradient(to top, #50BE87 59%, rgba(106, 123, 136, 0.42) 20%);