fancybox iframe IE rounded corners

I've tried a couple of solutions to get rounded corners for a fancybox iframe in IE with no luck.

DD_roun开发者_如何学Godies and PIE.htc don't seem to do the trick.

Did anyone find a solution that works?

Here is my code:

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

Thanks

I can definitely see why you'd have trouble with rounding the corners of an IFrame in IE, without the aid of CSS. I doubt any of the well known hacks would be able to deal with it (though you may want to mention it on the CSS3Pie forum).

My first suggestion would be to live with it having square corners in IE. I know that's probably not the answer you're looking for, but it may be the most pragmatic approach. How bad does it actually look? If it takes you a load of effort to get it right, how much will your users actually care?

If you definitely want to round the corners, I would suggest using a wrapper <div>, and rounding the corners on that instead.

You could try placing it outside the iFrame, but I have a sneaky suspicion that might not work too well; I think the iFrame's corners will bleed over the rounded corners of the container div, unless you give the contain some padding to compensate. That of course changes your page layout somewhat, but I think it'll be the most workable solution for you.

The alternative option is to put the rounded corners inside the iframe - ie make an element inside the iframe which has rounded corners, and place the rest of the iframe content inside of that. This solution, of course will have a big impact on how you populate the iframe. Depending on what your content is like and where it's coming from, it may not be easy to achieve.

Just wanted to let you (and others who might be researching this) that Fancybox2 includes border-radius in the .fancybox-skin and .fancybox-title-float-wrap .child properties, and it works in IE9 (the version I'm running on my computer).