沒有舍入的邊框：在IE9中的選擇器之後

我用CSS創建了一些奇特的按鈕，但是在IE9中，我的邊框不是圓形的。沒有舍入的邊框：在IE9中的選擇器之後

HTML：

<div id="buttons"> 
    <a href="#"></a> 
    <a href="#"></a> 
    <a href="#"></a> 
    <a href="#"></a> 
    <a href="#"></a> 
</div>

CSS：

#buttons a { 
    margin: 2px 4px; 
    border-radius: 13px; 
    height: 25px; 
    width: 25px; 
    display: block; 
    float: left; 
    position: relative; 
    background: rgb(178,91,91); 
    background: -moz-linear-gradient(top, rgba(178,91,91,1) 0%, rgba(252,200,200,1) 26%, rgba(89,52,52,1) 51%, rgba(254,254,254,1) 75%, rgba(85,52,54,1) 94%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(178,91,91,1)), color-stop(26%,rgba(252,200,200,1)), color-stop(51%,rgba(89,52,52,1)), color-stop(75%,rgba(254,254,254,1)), color-stop(94%,rgba(85,52,54,1))); 
    background: -webkit-linear-gradient(top, rgba(178,91,91,1) 0%,rgba(252,200,200,1) 26%,rgba(89,52,52,1) 51%,rgba(254,254,254,1) 75%,rgba(85,52,54,1) 94%); 
    background: -o-linear-gradient(top, rgba(178,91,91,1) 0%,rgba(252,200,200,1) 26%,rgba(89,52,52,1) 51%,rgba(254,254,254,1) 75%,rgba(85,52,54,1) 94%); 
    background: -ms-linear-gradient(top, rgba(178,91,91,1) 0%,rgba(252,200,200,1) 26%,rgba(89,52,52,1) 51%,rgba(254,254,254,1) 75%,rgba(85,52,54,1) 94%); 
    background: linear-gradient(to bottom, rgba(178,91,91,1) 0%,rgba(252,200,200,1) 26%,rgba(89,52,52,1) 51%,rgba(254,254,254,1) 75%,rgba(85,52,54,1) 94%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b25b5b', endColorstr='#553436',GradientType=0); 
    box-shadow: 0 0 3px rgba(0,0,0,0.2); 
} 

#buttons a:after { 
    background: #a62434; 
    background: -moz-linear-gradient(top, #ea5160 0%, #a62434 40%, #771b22 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea5160), color-stop(40%,#a62434), color-stop(100%,#771b22)); 
    background: -webkit-linear-gradient(top, #ea5160 0%,#a62434 40%,#771b22 100%); 
    background: -o-linear-gradient(top, #ea5160 0%,#a62434 40%,#771b22 100%); 
    background: -ms-linear-gradient(top, #ea5160 0%,#a62434 40%,#771b22 100%); 
    background: linear-gradient(to bottom, #ea5160 0%,#a62434 40%,#771b22 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#771b22', endColorstr='#ea5160',GradientType=0); 
    box-shadow: inset 0 0 3px rgba(91,22,23,0.5); 
    display: block; 
    content: ''; 
    position: absolute; 
    height: 21px; 
    width: 21px; 
    top: 2px; 
    left: 2px; 
    border-radius: 11px; 
}

演示：
http://jsfiddle.net/JJqe7/

來源

2012-08-11 Puyol

IE9可能回落到一個較舊的渲染引擎，因此不支持邊界半徑。嘗試添加以下元到您的<head>：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

查看更多在這裏：ie9 border radius

來源

2012-08-11 09:57:24

這不是問題，我恐怕這只是一個IE漏洞。 – Puyol 2012-08-11 11:22:30

沒有舍入的邊框：在IE9中的選擇器之後

回答

相關問題