Html CSS 3带背景剪辑的过滤器

Html CSS 3带背景剪辑的过滤器,html,css,internet-explorer-9,gradient,Html,Css,Internet Explorer 9,Gradient,我有这个CSS。类中的属性过滤器。crumb是我的背景,它可以完美地工作,Chrome、Firefox、safari、iPad、iPhone、Android。。。但原因不明。它只是在ie9上不起作用。我看到了半径为的黑色博尔德,但背景完全是正方形的 .left-crumb { margin-left:15px; -webkit-border-top-left-radius:5px; -webkit-border-bottom-left-radius:5px; -moz-border-radius

我有这个CSS。类中的属性过滤器。crumb是我的背景,它可以完美地工作,Chrome、Firefox、safari、iPad、iPhone、Android。。。但原因不明。它只是在ie9上不起作用。我看到了半径为的黑色博尔德,但背景完全是正方形的

.left-crumb {
margin-left:15px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}

.crumb {
margin-top:20px;
margin-bottom:10px;
background-image:0 color-stop(0.3,#798aad), color-stop(0.51,#6276a0), color-stop(0.51,#556a97), color-stop(0.75,#566c98), to(#546993));
background:linear-gradient(top,#4c4c4c0%,#59595912%,#66666625%,#47474739%,#2c2c2c50%,#00000051%,#11111160%,#2b2b2b76%,#1c1c1c91%,#131313100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c',endColorstr='#131313',GradientType=0);
font-weight:bolder;
border:solid 1px #54617D;
height:30px;
padding-left:10px;
padding-right:10px;
display:inline-block;
color:#FFF;
line-height:28px;
border-color:#484E59 #aaa #4C5C7A #54617D;
}

.right-crumb {
position:relative;
margin-right:10px;
padding-right:25px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomright:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
这里有一个快速的HTML,您可以进行测试

<div id="adminPanel"><a class="left-crumb crumb right-crumb" href="admin.php">Admin panel</a></div>


adminPanel只是一个div,它包含了所有IE9尚不支持的内容,但是您可以使用SVG来实现这一点,请下载源代码并在这里查看演示


IE过滤器(根本不是CSS3的一部分)不是背景,因此它们永远不会受到背景或边框剪裁的影响。感谢您的回答。真的很有帮助