Question

除了使用以下代码的IE之外，所有浏览器都会出现Fancybox圆角。

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

如何在IE浏览器中获得fancybox的圆角。

这是我的代码：

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

请在左侧找到“给我们打电话”按钮，当您点击它时，它会加载花哨的盒子。

由于亚辛

Answer 1

IE 7,8 doesn't support border-radius属性。试试this。

Answer 2

正如Lex提到IE不支持border-radius属性，对于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-content和#fancybox-outer 将CSS3 border-radius params添加到这些ID中。

在ie.js中放置这样的东西：

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

Voila，你现在已经在IE7和IE8中实现了圆角。

Answer 5

我最终得到了这个与fancyBox v2一起工作。我的方法基于user1167656的方法（谢谢！）：

将插件的CSS3 PIE插件js版本添加到您的网站以获取IE＆lt; 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。

查尔斯。

Answer 6

尝试添加元标记

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

在你的头部。它可能会解决你的问题。

IE中的JQuery fancybox圆角问题

6 个答案: