Question

我已经尝试了几个解决方案来为IE中的fancybox iframe提供圆角而没有运气。

DD_roundies和PIE.htc似乎没有做到这一点。

有没有人找到有效的解决方案？

这是我的代码：

    $("a.fancyboxGeneral").fancybox({
        'width': 521, 
        'height': '75%',
        'autoDimensions': true,
        'autoScale': true,
        'type': 'iframe',
            'onComplete': function () {
                DD_roundies.addRule('#fancybox-title', '5px', true);
                DD_roundies.addRule('#fancybox-outer', '10px', true);
                DD_roundies.addRule('#fancybox-wrap', '10px', true);
            }
    });

#fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
    -moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
    behavior: url(PIE-1.0beta3/PIE.htc);
}

#fancybox-outer {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    -moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
    behavior: url(PIE-1.0beta3/PIE.htc);
}

由于

Answer 1

我绝对可以理解为什么在没有CSS的帮助下，在IE中对IFrame的角落进行舍入会有问题。我怀疑任何一个众所周知的黑客都能够处理它（尽管你可能想在CSS3Pie论坛上提及它。）

我的第一个建议是在IE中使用方角。我知道这可能不是你想要的答案，但它可能是最实用的方法。它看起来有多糟糕？如果你需要付出很多努力才能做到正确，那么你的用户真正关心多少？

如果你肯定想绕过角落，我会建议你使用一个包装<div>，然后在角落四舍五入。

你可以尝试把它放在iFrame之外，但我有一种偷偷摸摸的怀疑，可能效果不太好;我认为iFrame的角落会溢出容器div的圆角，除非你给包含一些填充以补偿。这当然会稍微改变您的页面布局，但我认为这对您来说是最可行的解决方案。

另一种选择是将圆角置于iframe内 - 即在iframe中创建一个具有圆角的元素，并将其余的iframe内容放在其中。当然，此解决方案将对填充iframe的方式产生重大影响。根据您的内容是什么以及它来自何处，可能并不容易实现。

Answer 2

只是想让你（以及可能正在研究这个的其他人）Fancybox2在.fancybox-skin和.fancybox-title-float-wrap .child属性中包含border-radius，它可以在IE9中运行（版本我正在电脑上跑。）

fancybox iframe IE圆角

2 个答案: