2012-02-29 5 views
-1

На моем new site border-radius, похоже, не работает.border-radius работает во всех браузерах, кроме IE9

Я вижу границу, изгибающуюся, но фона нет.

+0

Есть примеры образцов? –

+0

как насчет некоторого кода? – jribeiro

+0

вы можете использовать [jsfiddle.net] (http://jsfiddle.net) или [gist.github.com] (http://gist.github.com), чтобы опубликовать фрагмент кода. – N30

ответ

1

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

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

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

если поддерживать границы радиуса в IE7/IE8 не является обязательным требованием, то вы не должны включать в себя CSS3PIE в IE9 inclues поддержку границы радиуса 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/

+0

^^^ Я уже знал это ... Поэтому почему я сказал, что это сработало для каждого другого, кроме одного. Я не знаю, почему вы ответите, не глядя на сайт. Это довольно очевидно. –

+0

@George Milonas Я считаю, что вы спрашиваете о div с названием Last Stories. вы можете попытаться удалить правило # region-sidebar-second .block css и применить простой css, как указано в jsfiddle? – N30

+0

Нет, я упомянул ранее его оранжевую панель меню ..... Я могу буквально видеть, что граница изогнута, но фон все еще там –

0

Я думаю, что это необходимое вам решение.

в вашем 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/

Надеется, что это помогло.

+0

PLS опубликуйте свой css главного меню, чтобы мы могли вам помочь – Bert

+0

Я не могу. Предел персонажа/ограничение по времени для комментария. Просто используйте firebug, чтобы посмотреть его. –

+0

ok Позвольте мне отредактировать мое сообщение и поместить мой код, который работает на меня. – Bert

0

Фактически, это не только IE9, но и IE9 -.

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

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

0

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

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

http://jsfiddle.net/ApYw4/

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

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

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

+0

Непонятно пока не показывается справа на IE9! http://i39.tinypic.com/4izbr4.png –

+0

Я увеличил его, чтобы вы могли видеть его лучше. Как вы можете видеть, границы кривые, но фон не делает !!! –

+0

, как я сказал вам в своем сообщении выше, следуйте инструкциям, чтобы добавить поведение: url (border-radius.htc); в вашем css. плохо обновите его и следуйте. он работает для меня – Bert

Смежные вопросы