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

【问题标题】：CSS Ribbon not working properly in IE 9CSS 功能区在 IE 9 中无法正常工作
【发布时间】：2017-12-10 10:39:45
【问题描述】：

谁能弄清楚为什么这在 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;
}

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

【问题讨论】：

你检查过你使用的每一个css是否都被IE9官方支持了吗？看看 caniuse.com
酷，谢谢！ @kalsowerus

标签： html css internet-explorer-9

【解决方案1】：

不幸的是，在 Internet Explorer 中找不到线性渐变，我遇到了同样的问题，你解决了在线性渐变之前放置一个简单的背景

像这样：

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

【讨论】：