尽管在IE和更早版本中应用了border-radius,为什么要显示角?

时间:2012-08-02 20:09:57

标签: css internet-explorer-9 css3

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

CHROME和其他浏览器

enter image description here

IE9及更早版本

enter image description here

似乎尽管应用了border-radius,仍然显示那些角落。

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

应该是什么?

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

尝试使用border-radius,你需要核心,而不仅仅是针对firefox和webkite,否则是因为那些早期的浏览器不支持边框半径,或者你没有使用正确的前缀, - ms- for microsoft

答案 2 :(得分:0)

问题在于您将圆角应用于a元素,但是将背景颜色分配给基础li元素。所以你有一个圆角矩形坐在一个带有彩色背景的非圆角矩形的顶部。因此,非圆角矩形的角落伸出。

比较这两个小提琴:

破碎:http://jsfiddle.net/87R5b/2/ 修正:http://jsfiddle.net/87R5b/3/

在第二个中,我将黄色渐变应用于a元素。这只是一种可能的解决方案,但它应该适合你。

希望这有帮助!