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

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

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

в разделе вашей головы.Это может решить вашу проблему.

Answer 2

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

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

<!--[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 3

Я бы порекомендовал Вам использовать плагин 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-content и # fancybox-outer Добавьте CSS3-параметры border-radius к этим идентификаторам.

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

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

Вуаля, вы округлилиуглы в IE7 и IE8.

Answer 4

Мне повезло с этим:

   $("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 5

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

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

Answer 6

IE 7, 8 не поддерживает свойство border-radius.Попробуйте это .