Нет эффекта, используя "border-radius" в IE9

Question

Я гуглил это, но не смог найти решение.Я применяю угловой радиус к своим элементам, но IE9 не показывает эффект.

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 показывает прямоугольные углы!

Answer 1

Ваш сайт отображается в режиме причуд. Это потому, что у вас есть некоторый контент (<script> элемент) до <!doctype>. В режиме причуд IE использует рендеринг, аналогичный IE5, поэтому border-radius не работает.

Answer 2

Возможно, вам нужно добавить метатег: <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Это скажет IE использовать последний доступный движок рендеринга, что означает, что border-radius должен рендериться. Конечно, это относится только к IE9 и новее.

Answer 3

Я бы попробовал это. у меня это сработало:

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

Answer 4

IE переключается в режим причуд на вашей странице, и поэтому углы не работают.Я думаю, это потому что тег script перед doctype, но вы должны использовать валидатор, чтобы устранить все возможные причины.