JQuery fancybox rounded corners problem in IE

Fancybox rounded corners are coming in all browsers except IE with the following code.

 jQuery('#fancybox-inner').css({'-moz-开发者_JS百科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'});

How can i get rounded corners for fancybox in IE.

Here is the my code:

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

Please find "call us" button on left and when you click on it ,it will load fancy box.

Thanks Yasin

IE 7, 8 doesn't support border-radius property. Try this.

As Lex mention IE does not support border-radius property, for IE you need to do the rounded corners using images (The image of each rounded corner) and position them on the corners you want

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

I've had luck with this:

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

where I'm using http://www.dillerdesign.com/experiment/DD_roundies/

I would recommend You to use the CSS3 PIE JS plugin: http://css3pie.com/

You simply implement the plugin on your site by adding this:

<!--[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 find: #fancybox-content and #fancybox-outer Add CSS3 border-radius params to those ID's.

And in ie.js place something like this:

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

Voila, you have now rounded corners in IE7 and IE8.

I eventually got this to work with fancyBox v2. My approach was based on user1167656's approach (thanks!):

Add the CSS3 PIE plugin js version of the plugin to your site for IE < 9:

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

In the fancy box attach js code catch the afterShow callback and add this code:

$.fancybox({

    <other fancyBox options here>

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

    <other fancyBox options here>

});

This works for me in IE8.

Charles.

Try to add the meta tag

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

In your head section. It may be solve you problem.