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

时间:2017-07-06 12:15:56

标签: html css internet-explorer-9

任何人都可以找出为什么这在IE 9中无法正常显示?这是它的样子: looks like 这就是它 应该是这样的:should look like

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

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;
}

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

1 个答案:

答案 0 :(得分:0)

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

像这样:

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