border-radius在IE10上不起作用

我需要一個帶圓角的容器「DIV」。以下代碼完美適用於除IE10以外的所有瀏覽器。我不知道如何才能使其工作。border-radius在IE10上不起作用

#about-kader { 
    width: 200px; 
    height: 180px; 
    float: left; 
    margin: 0px auto; 
    background-color: #9bafc4; 
    padding: 3px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    -ms-border-radius: 5px; 
    behavior: url(border-radius.htc); 
}

而這裏的HTML部分，請：

<div id="about-kader"> 
... 
... 
... 
</div>

有沒有辦法讓IE10中的任何圓角可見。我擁有的版本是：10.0.9200.16576，更新版本：10.0.5（KB289530）。

來源

2013-05-18 Tiz

如果您的解決方案確實有效，請將其作爲答案張貼並接受爲答案。 – Tass

嘗試只使用border-radius：5px，它工作嗎？如果有，請逐個添加額外的邊界半徑屬性，直到找到問題出現的位置。我懷疑它是導致問題的額外邊界屬性之一。我懷疑這種行爲可能是問題的根源。

來源

2013-05-18 10:53:45 Flipbed

不幸的是，只有「border-radius：5px;」它不起作用 – Tiz

嘗試使用此頁面生成半徑並查看它是否有效。 http://border-radius.com/ – Flipbed

是的，這個工程。它增加了我的關注，因爲據我所知，該指令只是邊界半徑：5px;我在你鏈接的頁面上試過寬度爲30px，並且它可以工作。我不知道我錯在哪裏。 – Tiz

邊框半徑的行爲受IE10兼容模式的影響。

如果按F12鍵，您可以查看開發人員控制檯並更改兼容性設置。

如果文檔模式設置爲IE7或IE8標準，則border-radius 5px不起作用，但是如果標準模式設置爲IE9標準或標準，則其行爲與預期相同。

我最終關閉了兼容模式，因爲它也打破了我使用的其他網站的行爲。

Ravenstar68

來源

2013-08-26 16:37:46 user2718649

感謝Flipbed's answer我找到了答案。在IE10上，對我的「邊界半徑」不起作用。爲了得到它的工作，有必要指定每個角落：

border-top-left-radius:5px; 
border-top-right-radius:5px; 
border-bottom-left-radius:5px; 
border-bottom-right-radius:5px;

事實上你發送的會場，也正是（看頁面的源代碼）。它作爲輸出提供指令：

border-radius: 5px;

但內部它聲明如上分開的四角。

_{這是從問題中提取出來並代表OP發佈的。}

來源

2016-02-17 15:19:55 gunr2171

border-radius在IE10上不起作用

回答

相關問題