fancybox iframe IE закругленные углы

Я попробовал несколько решений, чтобы получить закругленные углы для fancybox iframe в IE, но безуспешно.

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

Спасибо


jquery internet-explorer fancybox
person user441365    schedule 14.01.2011    source источник
comment
Как вы их реализуете, не могли бы вы опубликовать свой код.   -  person Lazarus    schedule 14.01.2011

Ответы (2)


arrow_upward
0
arrow_downward

Я определенно понимаю, почему у вас могут возникнуть проблемы со скруглением углов IFrame в IE без помощи CSS. Я сомневаюсь, что какой-либо из известных хаков сможет справиться с этим (хотя вы можете упомянуть об этом на форуме CSS3Pie).

Моим первым предложением было бы жить с квадратными углами в IE. Я знаю, что это, вероятно, не тот ответ, который вы ищете, но это может быть самый прагматичный подход. Насколько плохо это выглядит на самом деле? Если вам потребуется много усилий, чтобы сделать это правильно, насколько это действительно будет волновать ваших пользователей?

Если вы определенно хотите закруглить углы, я бы предложил использовать обертку <div> и вместо этого закруглить углы на ней.

Вы можете попробовать разместить его за пределами iFrame, но у меня есть подозрение, что это может не сработать; Я думаю, что углы iFrame будут выходить за закругленные углы div-контейнера, если вы не дадите содержащемуся дополнению для компенсации. Это, конечно, несколько меняет макет вашей страницы, но я думаю, что это будет наиболее подходящее решение для вас.

Альтернативным вариантом является размещение закругленных углов внутри iframe, т.е. создание внутри iframe элемента со скругленными углами и размещение остальной части содержимого iframe внутри него. Это решение, конечно, окажет большое влияние на то, как вы заполняете iframe. В зависимости от того, на что похож ваш контент и откуда он берется, добиться этого может быть непросто.

person Spudley    schedule 14.01.2011
comment
Спасибо за ответ. Это должно было произойти раньше, поэтому должен быть фрагмент кода, который можно использовать повторно... - person user441365; 14.01.2011

arrow_upward
0
arrow_downward

Просто хотел сообщить вам (и другим, кто может исследовать это), что Fancybox2 включает в себя border-radius в свойствах .fancybox-skin и .fancybox-title-float-wrap .child и работает в IE9 (версия, которую я работает на моем компьютере).

person Chaya Cooper    schedule 17.12.2012