JQuery fancybox abgerundete Ecken Problem in IE

Question

Fancybox abgerundeten Ecken kommen in allen Browsern außer IE mit dem folgenden Code.

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'}); 

Wie bekomme ich abgerundete Ecken für fancybox in IE.

Hier ist der mein Code:

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

Bitte finden „rufen Sie uns“ Knopf auf der linken Seite und wenn Sie darauf klicken, wird es fancy box laden.

Dank Yasin

Answer 1

IE 7, 8 doesn't support border-radius Eigenschaft. Versuchen Sie this.

Answer 2

Als Lex erwähnen IE nicht border-radius Eigenschaft nicht unterstützt, für IE Sie die abgerundeten Ecken unter Verwendung von Bildern (das Bild jedes abgerundeten Ecke) tun müssen, und positionieren Sie sie an den Ecken Sie

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

Answer 3

ich habe Glück mit diesem hat:

$("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); 
    } 
}); 

wo ich http://www.dillerdesign.com/experiment/DD_roundies/

Answer 4

bin mit würde ich empfehlen, Sie sind mit der CSS3 PIE JS-Plugin zu verwenden: http://css3pie.com/

Sie einfach das Plugin auf Ihrer Website implementieren, indem Sie diese:

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

In fancybox CSS Fund: # fancybox-Inhalt und # fancybox-Außen hinzufügen CSS3 border-radius params zu diesen IDs.

Und in ie.js Ort etwas wie folgt aus:

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

Voila, Sie haben nun abgerundeten Ecken in IE7 und IE8.

Answer 5

Ich bekam schließlich dies mit fancyBox v2 zu arbeiten. Mein Ansatz basierte auf user1167656 Ansatz (danke!):

In der CSS3 PIE Plugin js Version des Plugins auf Ihrer Website für IE < 9:

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

Im fancy box den js Code fangen anhängen Rufe Callback auf und füge diesen Code hinzu:

$.fancybox({ 

    <other fancyBox options here> 

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

    <other fancyBox options here> 

}); 

Das funktioniert für mich in IE8.

Charles.

Answer 6

Versuchen Sie den Meta-Tag

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

In Ihrem Kopfteil hinzuzufügen. Es kann dein Problem lösen.