任何人都可以找出为什么这在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;
}
这显示在另一个框内。这是很多代码,所以我没有粘贴它,但如果需要,请告诉我,我会发布。谢谢!
答案 0 :(得分:0)
遗憾的是,在Internet Explorer中找不到线性渐变,我遇到了同样的问题,并且在线性渐变之前放置了一个简单的背景
像这样:span.addl-colors {
background: #25aeca;
background:linear-gradient(#25aeca 0%, #5fc8c2 100%);
...
}