CSS3圓角在IE怪癖模式下不工作

我有一個網站，在瀏覽器模式和IE5怪癖作爲文檔模式在IE 10中完美工作。但是在這種情況下，圓角不起作用。當我將文檔模式更改爲IE 9標準時，圓角正在工作。但我希望IE 5怪異的文檔模式。CSS3圓角在IE怪癖模式下不工作

我的CSS是：

.roundedcorner 
{ 
    behavior: url(/Includes/border-radius.htc); 
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    -khtml-border-radius: 30px; 
    border-radius: 30px; 
    border-top-left-radius:30px; 
    border-top-right-radius:30px; 
    border-bottom-left-radius:30px; 
    border-bottom-right-radius:30px; 
}

來源

2013-08-26 user2219742

當您說：「請渲染不符合當前標準的古老硬殼文檔模式」時，您不應該期望能夠使用像CSS3這樣的現代標準。如果您的問題是「爲什麼我的border-radius.htc行爲不起作用」，這是因爲出於性能和符合標準的原因，行爲在IE10中被刪除。請參閱http://msdn.microsoft.com/en-us/library/ie/hh801216(v=vs.85).aspx – EricLaw

怪癖模式不支持CSS3，CSS行爲爲disabled in IE10。您可以將標題設置爲IE=edge，並忘記怪異模式。

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

看看http://border-radius.com/。

-webkit-border-top-left-radius: 10px; 
-webkit-border-top-right-radius: 10px; 
-moz-border-radius-topleft: 10px; 
-moz-border-radius-topright: 10px; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px;

來源

2013-08-26 10:58:55 M1K1O

試試這個

<!--[if gte IE 9]> 
    <style> 
     .roundedcorner{ 
      border-top-right-radius: 20px; 
      border-bottom-right-radius: 20px; 
      border-top-left-radius: 20px; 
      border-bottom-left-radius: 20px; 
     } 
    </style> 
<![endif]-->

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<style> 
.roundedcorner{ 
border-top-right-radius: 20px; 
border-top-left-radius: 20px; 
border-bottom-right-radius: 20px; 
border-bottom-left-radius: 20px; 
} 
</style>

像

DEMO

來源

2013-08-26 10:58:52 falguni

使用的瀏覽器模式IE9與IE9 standards。這裏的代碼工作正常。此外，當所有角落都是30px時，不需要將每個角落定義爲單獨屬性，因此只需使用border-radius: 30px;即可。

來源

2013-08-26 10:59:27 Mooseman

CSS3圓角在IE怪癖模式下不工作

回答

相關問題