爲什麼儘管在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和更早的版本中應用邊界半徑來展示角點？

回答

相關問題