CSS功能区在IE 9中无法正常工作

Question

任何人都可以找出为什么这在IE 9中无法正常显示？这是它的样子： 这就是它 应该是这样的：

这是我的代码 - 任何帮助将不胜感激。谢谢！

HTML

<div class="addl-colors-container">
<span class="addl-colors">
::before
"Multiple Options""
::after
</span>
</div>

CSS

 .addl-colors-container{
    width:105px;
    height:105px;
    position:absolute;
    z-index:1;
    text-align:center;
    pointer-events:none;
    margin:-10px;
    font-size:14px;
}
span.addl-colors {
    background:linear-gradient(#25aeca 0%, #5fc8c2 100%);
    box-shadow:0 3px 10px -5px rgba(0, 0, 0, 1);
    top:20px;
    line-height:22px;
    width:147px;
    right:-16px;
    transform:rotate(-37deg);
    -ms-transform:rotate(-37deg);
    -webkit-transform:rotate(-37deg);
    display:block;
    position:absolute;
    color:#fff;
    border-top-right-radius:75px;
    border-top-left-radius:75px;
    }
span.addl-colors:after{
    content:'';
    position:absolute;
    left:0px;
    top:100%;
    z-index:-1;
    border-left:3px solid #25aeca;
    border-right:3px solid transparent;
    border-bottom:3px solid transparent;
    border-top:3px solid #25aeca;
}
span.addl-colors:before{
    content:'';
    position:absolute;
    right:0%;
    top:100%;
    z-index:-1px;
    border-right:3px solid #25aeca;
    border-left:3px solid transparent;
    border-bottom:3px solid transparent;
    border-top:3px solid #25aeca;
}

这显示在另一个框内。这是很多代码，所以我没有粘贴它，但如果需要，请告诉我，我会发布。谢谢！

Answer 1

遗憾的是，在Internet Explorer中找不到线性渐变，我遇到了同样的问题，并且在线性渐变之前放置了一个简单的背景

像这样：

span.addl-colors {
    background: #25aeca;
    background:linear-gradient(#25aeca 0%, #5fc8c2 100%);
    ...
}