圓角不能在IE9中工作

據我所知，IE9應該有圓角的CSS支持。儘管在IE9中不會出現這種情況，但我顯然是以這種方式編寫了我的頁面 - 儘管它在Chrome和FF中正確顯示。圓角不能在IE9中工作

* 我已經編輯CSS，以反映建議按照下面的答案 - 問題仍然出現* 我需要的頂部和底部的左側角落只爲包含網站主導航在div四捨五入。

'現在激活'按鈕也不起作用，在託管包顯示框中。

網站鏈接以查看http://activehost.co.nz

我檢查了其他的問題 - 而最常見的原因（使用前綴）是不是我做的。

部分的相關CSS如下。

導航：

#main_nav { 
    margin: 0px 0px 10px 0px; 
    float: right; 
    height: 37px; 
    /*background:url(../img/nav_bg.png); 
    background-repeat: repeat-x;*/ 
    background-color: #286e38; 
    background-repeat: repeat-x; 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38)); 
    background-image: -moz-linear-gradient(top, #6dc067, #286e38); 
    background-image: -ms-linear-gradient(top, #6dc067, #286e38); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38)); 
    background-image: -webkit-linear-gradient(top, #6dc067, #286e38); 
    background-image: -o-linear-gradient(top, #6dc067, #286e38); 
    background-image: linear-gradient(top, #6dc067, #286e38); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0); 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    border-radius: 20px 0px 0px 20px; 
    clear: right; 

}

併爲「現在激活按鈕的CSS：

 .hosting_order { 
    position: absolute; 
    top: 148px; 
    border: none; 
    height: 35px !important; 
    background-color: #286e38; 
    background-repeat: repeat-x; 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38)); 
    background-image: -moz-linear-gradient(top, #6dc067, #286e38); 
    background-image: -ms-linear-gradient(top, #6dc067, #286e38); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38)); 
    background-image: -webkit-linear-gradient(top, #6dc067, #286e38); 
    background-image: -o-linear-gradient(top, #6dc067, #286e38); 
    background-image: linear-gradient(top, #6dc067, #286e38); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0); 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    color: #ffffff; 
    width: 120px; 
    padding: 0px 20px; 
    font-weight: bolder; 
    font-size: 1.1em; 
    border-radius:20px; 
    box-shadow: 2px 2px #888888; 
}

背景圖像CSS是產生漸變效果 - 我不知道這是什麼問題？

來源

2012-02-15 Toby Behan

這是因爲您將filter和border-radius組合爲相同的元素。嘗試將border-radius應用於一個元素，並對其子元素進行篩選。

來源

2012-02-15 19:20:36

這確實是與過濾器的衝突。我會將它們分開並以不同的方式應用CSS。將過濾器線路立即解決問題 - 謝謝！ – 2012-02-15 19:28:51

我遇到了一個問題，我的邊框是圓形的，但是白色的漸變背景不是，留下的小角落突出。在同一個元素的IE特定樣式表中應用過濾器解決了這個問題。感謝你！ – daddywoodland 2012-05-24 13:11:57

看到有關meta標籤和其他一些可能的問題/進程這個問題，以消除：IE9 border-radius

來源

2012-02-15 18:21:35

謝謝。在那裏沒有直接的解決方案 - 但它確實指向了另一個問題的方向。 – 2012-02-15 19:08:26

你只需要如果你使用「左下角」等來定義你的邊界半徑一個數。通過指定兩個數字，IE9可能無法正確解釋它。

如果使用以下內容，則第一個數字是左上角，第二個數字是右上角，第三個數字是右下角，第四個數字是左下角。

-moz-border-radius: 8px 8px 0px 0px; 
    -webkit-border-radius: 8px 8px 0px 0px; 
    -0-border-radius: 8px 8px 0px 0px; 
    border-radius: 8px 8px 0px 0px;

來源

2012-02-15 18:26:54 thepriebe

感謝您選擇這個 - 我已經調整過，但現在仍然有效。編輯後的CSS規則現在爲border-radius 20px 0px 0px 20px，border-radius：20px爲按鈕。 IE9仍然沒有改變？我將編輯我的主帖以反映新的CSS。 – 2012-02-15 18:39:32

您是否嘗試在您的CSS中添加'behavior：url（/PIE.htc）;'？據稱IE9能夠處理邊界半徑，但它仍然涉及很多事情。 – thepriebe 2012-02-15 19:22:04

就個人而言，我設立了另一個定義爲我的行爲一個獨立的區域，所以這樣的：'.hosting_order，#main_nav {行爲：網址（/PIE.htc）;}' – thepriebe 2012-02-15 19:22:57

對於IE9，你是正確的，它不喜歡邊界半徑和過濾器組合。這是我遵循的，它在IE9以及所有其他瀏覽器中完美運行。

https://github.com/bfintal/jQuery.IE9Gradius.js

希望幫助！

來源

2012-04-17 17:45:23