border-radius работает во всех браузерах, кроме IE9

Question

На моем новом сайте border-radius не работает.

Я вижу изгиб границы, но фон - нет.

Answer 1

border-radius должен работать.

следующие работы в IE 9

http://jsfiddle.net/Ec86p/3/

если поддержка граничного радиуса в IE7 / IE8 не является обязательным требованием, вам не следует включать CSS3PIE, поскольку IE9 включает поддержку свойства border-radius css.

редактирование:

Я обновил вашу скрипку

http://jsfiddle.net/Zr8vE/3/

и изменил следующее:

#main-menu li.first{
border-left:1px solid #feb800;

border-top-left-radius: 5px 5px;
-moz-border-top-left-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;

border-bottom-left-radius: 5px 5px;
-moz-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-left-radius: 5px 5px;

padding-left:10px;
}

редактировать: # 2

как только я удалил подписку из (#main-menu li)

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9900', endColorstr='#ff7c00',GradientType=0 );

это начало работать. (Я попробовал это в IE 9, оранжевый фон, кажется, изгибается, как граница)

http://jsfiddle.net/Zr8vE/15/

Answer 2

Вот теперь ответ.

попробуйте просто отредактировать интервал между словами.

http://jsfiddle.net/ApYw4/

для решения IE 9, как я уже говорил вам скачатьэто border-radius.htc и добавьте к своему CSS вот так

#main-menu{
behavior: url(border-radius.htc);
//all css
}

Не стесняйтесь поправлять меня, если что-то не так.

Answer 3

на самом деле, это не только IE9, но и IE9 -.

вы можете либо следовать за ответом @Bert, либо вы можете попробовать CSS3PIE

использование такое же, но CSS3PIE предоставляет больше возможностей CSS3 для IE.

Answer 4

я думаю, что это решение, которое вам нужно.

в вашем css примените это к элементу, которому нужен закругленный угол

#element{
behavior: url(border-radius.htc);
}

загрузите и выполните поиск в google border-radius.htc и сохраните его в папке с изображениями или в любом другом месте, где вам нравится, это изображение с кривой и используется для решения проблемы IE.

Я опубликую свой css для моего главного меню, которое работает для меня с закругленной рамкой.

#main-nav {
width: 100%;
background: #ccc;
margin: 0;
padding: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
/* gradient */
background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top,  #b9b9b9,  #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}

Пожалуйста, попробуйте это.

вот ссылка http://jsfiddle.net/vZaJX/

Надеюсь, это помогло.