fancybox iframe IE abgerundete Ecken

Question

Ich habe ein paar Lösungen ausprobiert, um abgerundete Ecken für einen fancybox iframe in IE ohne Glück zu bekommen.

DD_roundies und PIE.htc scheinen nicht den Trick zu tun.

Hat jemand eine Lösung gefunden, die funktioniert?

Hier ist mein 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); 
} 

Dank

Answer 1

Ich kann definitiv sehen, warum Sie Probleme mit Abrunden der Ecken eines IFrame in IE haben würde, ohne die Hilfe von CSS. Ich bezweifle, dass einer der bekannten Hacks damit umgehen könnte (obwohl Sie es vielleicht im CSS3Pie Forum erwähnen wollen).

Mein erster Vorschlag wäre, damit zu leben, quadratische Ecken in IE zu haben. Ich weiß, das ist wahrscheinlich nicht die Antwort, die Sie suchen, aber es könnte der pragmatischste Ansatz sein. Wie schlimm sieht es eigentlich aus? Wenn es Ihnen eine Menge Aufwand kostet, um es richtig zu machen, wie viel werden Ihre Benutzer wirklich interessieren?

Wenn Sie auf jeden Fall die Ecken abrunden wollen, würde ich vorschlagen, einen Wrapper <div> zu verwenden und stattdessen die Ecken zu runden.

Sie könnten versuchen, es außerhalb des iFrame zu platzieren, aber ich habe einen hinterhältigen Verdacht, der vielleicht nicht so gut funktioniert; Ich denke, dass die Ecken des iFrames über die abgerundeten Ecken des Container-Divs bluten werden, es sei denn, Sie geben dem Contain ein Padding zum Ausgleich. Das ändert natürlich Ihr Seitenlayout etwas, aber ich denke, es wird die praktikabelste Lösung für Sie sein.

Die alternative Option besteht darin, die abgerundeten Ecken innerhalb des Iframes zu platzieren - dh ein Element innerhalb des Iframes mit abgerundeten Ecken zu machen und den Rest des Iframe-Inhalts darin zu platzieren. Diese Lösung wird natürlich einen großen Einfluss darauf haben, wie Sie den Iframe bevölkern. Je nachdem, wie deine Inhalte sind und woher sie kommen, ist es vielleicht nicht einfach, sie zu erreichen.

Answer 2

Ich wollte Sie (und andere, die das vielleicht untersuchen), dass Fancybox2 border-Radius in den Eigenschaften .fancybox-skin und .fancybox-title-float-wrap .child enthält, und es funktioniert in IE9 (der Version Ich laufe auf meinem Computer).