为什么尽管在IE和更早的版本中应用边界半径来展示角点？

我有一个问题，但不完全与边界半径，但AMM不知道如何解释，但我把2个图像在Chrome浏览器，Firefox等，以及IE9和更早的版本中看到的另一个图像。为什么尽管在IE和更早的版本中应用边界半径来展示角点？

Chrome和其他浏览器

enter image description here

IE9和早期

enter image description here

看来，尽管应用边界半径，仍然显示出那些角落。

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

应该是什么？

来源

2012-08-02 SoldierCorp

尝试添加border-radius：12px; - 其他两个特定于webkit和mozilla浏览器 – 2012-08-02 20:13:11

我用你的代码创建了一个小提琴，它似乎工作正常。 http://jsfiddle.net/87R5b/1/我在IE9中测试了它。 – mwcz 2012-08-02 20:19:25

你能看到编辑过的帖子吗？ – SoldierCorp 2012-08-02 20:24:44

您正在使用IE筛选器为您的元素应用渐变。不幸的是，这些过滤器不会被border-radius剪切，因为它们不会被涂在箱子的背景上，无论您是将border-radius应用于相同的元素还是其容器。

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

来源

2012-08-02 20:33:31 BoltClock

是的。作品！只需保留SVG图像的第一行即可。谢谢！！ – SoldierCorp 2012-08-02 20:40:19

有关IE9边界半径和渐变出血的更多信息：http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding – mwcz 2012-08-02 20:50:08

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

来源

2012-08-02 20:13:14 Andy

我只使用border-radius并没有工作，然后放置-ms-border-radius并且都不工作！ – SoldierCorp 2012-08-02 20:19:58

IE9支持'border-radius'。不需要使用-ms-前缀或删除Firefox和Webkit前缀属性。 – mwcz 2012-08-02 20:22:05

你能看到编辑过的帖子吗？ – SoldierCorp 2012-08-02 20:24:35

问题是，您将圆角应用于a元素，但将底色分配给底层的li元素。所以你有一个圆角的矩形坐在一个非圆角矩形的背景上。因此，非圆角矩形的拐角伸出。

比较这两种小提琴：

断裂：http://jsfiddle.net/87R5b/2/ 修正：http://jsfiddle.net/87R5b/3/

在第二个，我所施加的黄色梯度到a元件代替。这只是一个可能的解决方案，但它应该适合你。

希望这会有所帮助！

来源

2012-08-02 20:33:41 mwcz

是正确的，但我已经有了这样的代码。这些ID已经将它们放在'a'而不是'li'中..解决方案只使用第一行的背景.. img svg！但是，谢谢！ – SoldierCorp 2012-08-02 20:38:53

为什么尽管在IE和更早的版本中应用边界半径来展示角点？

回答

相关问题