border radius ie firefox chrome conflict

У меня конфликты в css3 границах между браузерами.border radius ie firefox chrome conflict

#menu ul li:first-child { 
    border-radius: 0px 8px 8px 0px; 
} 

#menu ul li:last-child { 
    border-radius: 8px 0px 0px 8px; 
} 

<ul> 
    <li><a href="#">الرئيسية</a></li> 
    <li><a href="#">صفحتي</a></li>    
    <li><a href="#">كتبي</a></li> 
    <li><a href="#">أصدقائي</a></li>    
    <li><a href="#">خروج</a></li> 
</ul>

светлячок

FireFox and Chrome

т.е. проблема

IE Problem

источник

2012-05-23 T4mer

используйте «пирог», это займет весь браузер – ShibinRagh

Я подозреваю, что это из-за направления rtl.

Решение: добавить класс в HTML для IE с помощью условных - пример:

<!--[if IE]><div dir="rtl" class="ie"><![endif]--> 
<!--[if !IE]><!--><div dir="rtl"><!--<![endif]--> 
<div id="menu"> 
    <ul> 
     <li><a href="#">الرئيسية</a></li><li><a href="#">صفحتي</a></li><li><a href="#">كتبي</a></li><li><a href="#">أصدقائي</a></li><li><a href="#">خروج</a></li> 
    </ul> 
</div> 
</div>

Я добавил класс к содержащему DIV, но вы можете добавить его непосредственно к <html> тегу (см http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)

И тогда вы будете иметь что-то подобное в вашем CSS:

#menu li:first-child { 
    border-radius: 0 8px 8px 0; 
} 
#menu li:last-child { 
    border-radius: 8px 0 0 8px; 
} 
.ie #menu li:first-child { 
    border-radius: 8px 0 0 8px; 
} 
.ie #menu li:last-child { 
    border-radius: 0 8px 8px 0; 
}

Полная демонстрация здесь http://dabblet.com/gist/2774749 - Я протестировал ее и работает так же в Chrome, Firefox, Opera и IE9.

источник

2012-05-23 12:06:08 Ana

попробовать это:

#menu ul li:first-child { 
    -webkit-border-top-left-radius: 8px; 
    -webkit-border-bottom-left-radius: 8px; 
    -moz-border-radius-topleft: 8px; 
    -moz-border-radius-bottomleft: 8px; 
    border-top-left-radius: 8px; 
    border-bottom-left-radius: 8px; 
} 

#menu ul li:last-child { 
    -webkit-border-top-right-radius: 8px; 
    -webkit-border-bottom-right-radius: 8px; 
    -moz-border-radius-topright: 8px; 
    -moz-border-radius-bottomright: 8px; 
    border-top-right-radius: 8px; 
    border-bottom-right-radius: 8px; 
}

это всегда лучше, чтобы определить ваш браузер конкретных CSS, прежде чем сделать общую команду

источник

2012-05-23 09:38:30 p0rter

та же проблема, исправлена в ie, но дело идет не так в firefox и chrome. – T4mer

может использовать это исправление с условными комментариями и загружать его только для IE? – cchana

попытайтесь добавить ваш css в конце моего css – p0rter

-1

в т радиуса границы не поддерживается с помощью CSS, вы должны использовать Javascript Читайте этот учебник для полной помощи, как границы радиуса в IE

http://davidwalsh.name/css-rounded-corners

источник

2012-05-23 09:50:27

он поддерживается в ie9 – T4mer

border radius ie firefox chrome conflict

ответ

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