internet-explorer-9 - 尽管在 IE 和更早版本中应用了 border-radius，为什么还要显示 Angular ？

Question

我有一个问题，但不完全是边界半径问题，但我不知道如何解释，但我放了 2 张在 chrome、firefox 等中看到的图像和另一张在 IE9 和更早版本中看到的图像。

CHROME 和其他浏览器

IE9 及更早版本

似乎尽管应用了 border-radius，仍然显示那些 Angular 。

aside#sidebar ul {
    margin-top: 15px;
    width: 100%;
    height: 200px;
    background: transparent;
}
aside#sidebar ul li {
    font-size: 14px;
    list-style-type: none;
    margin-bottom: 5px;
    background: transparent;
    //border: 3px solid white;
}
aside#sidebar ul li a {
    display: block;
    padding: 5px;
    color: white;
    border-left: 10px solid white;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    behavior: url(PIE.htc);
    background: transparent;
}

编辑

这部分有什么作用吗？用于列表中每个元素的背景，这是第一个的背景

aside#sidebar #itemLinea1 {
    //border-color: #DE9E26;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZWFiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZjY2Q0ZCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Y4YjUwMCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYmRmOTMiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,0.75) 50%, rgba(248,181,0,0.75) 51%, rgba(251,223,147,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,234,187,1)), color-stop(50%,rgba(252,205,77,0.75)), color-stop(51%,rgba(248,181,0,0.75)), color-stop(100%,rgba(251,223,147,0.5)));
    background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: -o-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#80fbdf93',GradientType=0 );
    transition: border 0.3s linear;
    -webkit-transition: border 0.3s linear;
    -moz-transition: border 0.3s linear;
    -o-transition: border 0.3s linear;
}

应该在什么位置？

Answer 1

您正在使用 IE 过滤器为您的元素应用渐变。不幸的是，这些过滤器不会被 border-radius 裁剪，因为它们没有绘制在盒子的背景上，无论您是将 border-radius 应用于相同的元素还是它们容器。

如果您需要应用渐变背景，最好的办法是使用背景图片。如果您只需要支持 IE9，请放弃过滤器并保留 SVG 背景图像。