Проблема с закругленными углами JQuery fancybox в IE

Question

Округлые углы Fancybox входят во все браузеры, кроме IE со следующим кодом.

jQuery('#fancybox-inner').css({'-moz-border-radius':'10px', '-webkit-border-radius':'10px', 'border-radius':'10px'}); 
      jQuery('#fancybox-outer').css({'-moz-border-radius':'10px', '-webkit-border-radius':'10px', 'border-radius':'10px'}); 
    jQuery('#fancybox-wrap').css({'-moz-border-radius':'10px', '-webkit-border-radius':'10px', 'border-radius':'10px'}); 

Как я могу получить закругленные углы для fancybox в IE.

Вот мой код:

http://phone.invox.com/widgetconfig/mcwidget8/test.html

Пожалуйста найти «позвоните нам» кнопку на левой и при нажатии на него, он загрузит фантазии поле.

Благодаря Ясин

Answer 1

IE 7, 8 doesn't support граница радиуса собственности. Попробуйте this.

Answer 2

Как Lex говоря IE не поддерживает границы радиуса свойство, для IE вам нужно сделать закругленные углы, используя изображения (изображение каждого закругленного угла) и расположить их по углам вы хотите

http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

Answer 3

Я имел счастье с этим:

$("a.fancy").fancybox({ 
    'titlePosition' : 'inside', 
    'overlayShow' : true, 
    'overlayOpacity': 0.5, 
    'overlayColor' : '#000', 
    'onComplete' : function() { 
    DD_roundies.addRule('#fancybox-title', '5px', true); 
    DD_roundies.addRule('#fancybox-outer', '10px', true); 
    } 
}); 

где я использую http://www.dillerdesign.com/experiment/DD_roundies/

Answer 4

Я бы рекомендовал Вы использовать плагин CSS3 PIE JS: http://css3pie.com/

Вы просто реализовать плагин на вашем сайте, добавив это:

<!--[if lt IE 9]> 
<script type="text/javascript" src="js/pie.js"></script> 
<script type="text/javascript" src="js/ie.js"></script> 
<![endif]--> 

В FancyBox CSS находке: # FancyBox-содержание и # FancyBox-наружная Добавить CSS3 Параметр border-radius для этих идентификаторов.

И в ie.js место что-то вроде этого:

$(function() { 
    $('#fancybox-outer, #fancybox-content').each(function() { 
     PIE.attach(this); 
    }); 
}); 

Вуаля, у вас есть сейчас закругленные углы в IE7 и IE8.

Answer 5

В итоге я получил это для работы с fancyBox v2. Мой подход был основан на подходе user1167656 в (спасибо!):

Добавить в CSS3 PIE плагин расслоения плотной версии плагина для вашего сайта для IE < 9:

<!--[if lt IE 9]> 
<script type="text/javascript" src="html/script/PIE.js"></script> 
<![endif]--> 

В фантазии поля прикрепить JS код поймать afterShow обратный вызов и добавьте этот код:

$.fancybox({ 

    <other fancyBox options here> 

    'afterShow': function(){ 
     if (window.PIE) { 
      $('.fancybox-skin').each(function() { 
       PIE.attach(this); 
      }); 
     } 
    }, 

    <other fancyBox options here> 

}); 

Это работает для меня в IE8.

Charles.

Answer 6

Попробуйте добавить мета-тег

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

В вашей головной секции. Это может решить вашу проблему.