2011-01-14 13 views
3

私は運が悪いIEのfancybox iframeの丸みを帯びたコーナーを得るためにいくつかのソリューションを試しました。fancybox iframe IE rounded corner

DD_roundiesとPIE.htcはこのトリックを実行していないようです。

誰かが解決策を見つけましたか?あなたがIEでのIFrameの角を丸めるとのトラブルを持っているだろう、なぜ私は間違いなく、CSSの助けを借りずに、見ることができます

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

おかげ

+0

どのようにこれらを実装していますか、コードを投稿してください。 – Lazarus

答えて

0

は、ここに私のコードです。私はよく知られているハッキングのどれかがそれに対処できるとは思っていません(あなたはCSS3Pieフォーラムで言及したいかもしれませんが)。

私の最初の提案は、IEで正方形のコーナーを持つそれと一緒に住むことです。おそらくそれがあなたが探している答えではないことは分かっていますが、最も実用的なアプローチかもしれません。それは実際にどれくらい悪いですか?あなたがそれを正しく取るためにあなたに多くの労力を要する場合、あなたのユーザーは実際どれくらい気にしますか?

角を丸くしたい場合は、ラッパー<div>を使用して、代わりに角を丸めることをお勧めします。

iFrameの外側に配置してみることもできますが、うまく動作しない可能性があります。私はあなたが補完するためにいくつかのパディングを与えない限り、コンテナdivの丸い角の上に、iFrameのコーナーが出ると思います。もちろん、あなたのページのレイアウトはいくらか変更されますが、それはあなたにとって最も実用的な解決策になると思います。

代わりに、丸い角をiframeの内側に配置することができます。つまり、角を丸めたiframe内に要素を作成し、残りのiframeコンテンツをその内部に配置します。このソリューションは、もちろん、iframeをどのように埋め込むかに大きな影響を与えます。あなたのコンテンツがどのようなものか、どこから来ているかによって、達成するのは簡単ではないかもしれません。

+0

答えに感謝します。これは前に起こったに違いないので、そこにコードを再利用する必要があります。 – user441365

0

Fancybox2には.fancybox-skinと.fancybox-title-float-wrap .childプロパティにborder-radiusが含まれていて、IE9で動作するようにしたいと思っています。バージョン私は自分のコンピュータで動いています)。