:before psuedo元素在IE 11中无法使用。

Question

这段代码在IE11中不起作用，在chrome和Mozilla中都能正常工作，我想在div.border-green上添加背景色，但在IE11中失败了。

.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%);