在IE9中使用「border-radius」沒有任何效果

我使用谷歌搜索，但找不到解決方案。我正在將corner-radius應用於我的div，但IE9未顯示效果。在IE9中使用「border-radius」沒有任何效果

CSS：

.ipleft { 
width: 512px; 
height:300px; 
-webkit-border-radius: 10px 0px 0px 10px; 
-khtml-border-radius: 10px 0px 0px 10px; 
-moz-border-radius: 10px 0px 0px 10px; 
border-radius: 10px 0px 0px 10px; 
background-image: url(images/ipleft.png); 
float: left;} 

.ipright { 
width: 512px; 
position: relative; 
height:300px; 
-webkit-border-radius: 0px 10px 10px 0px; 
-khtml-border-radius: 0px 10px 10px 0px; 
-moz-border-radius: 0px 10px 10px 0px; 
border-radius: 0px 10px 10px 0px; 
background-image: url(images/ipright.png); 
float: right;}

我添加了相應的元標記，它仍然沒有工作！該網站是www.campusonsale.com。如果你用FF看看，圓角應用沒有問題，但IE9顯示矩形的角落！

來源

2011-11-15 user1048389

看看css3pie.com它是漸進的Internet Explorer，你可以使用新的CSS技術與IE瀏覽器使用htc文件。 – James

是否兼容模式？ –

[ie9 border radius]可能重複（http://stackoverflow.com/questions/5381446/ie9-border-radius） - 您可能需要將正確的文檔類型添加到您的HTML文件。 – Blazemonger

IE在您的頁面切換到怪癖模式，這就是爲什麼拐角不起作用。我認爲這是因爲doctype之前的腳本標記，但您應該使用驗證器來消除所有可能的原因。

來源

2011-11-15 20:11:04 DzikiMarian

您的網站正在以怪癖模式顯示。這是因爲您在<!doctype>之前有一些內容（<script>元素）。在怪癖模式下，IE使用類似於IE5的渲染，因此border-radius不起作用。

來源

2011-11-15 20:11:06 duri

謝謝！現在已經修復了。 :) – user1048389

我可能是你需要添加此meta標籤：<meta http-equiv="X-UA-Compatible" content="IE=edge" />

這會告訴IE使用最新渲染引擎提供給它，這意味着邊界半徑應該呈現。當然，這僅適用於IE9及更高版本。

來源

2011-11-15 20:11:26

我會試試這個。它爲我工作：

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

來源

2011-11-15 20:13:07

IE糟糕的另一個原因。 – MacMac

在IE9中使用「border-radius」沒有任何效果

回答

相關問題