2017-11-09 8 views
0

サードパーティのiFrameを使用して特定のコンテンツを配信していますが、このiframeを含めるdivにborder-radiusoverflow: hiddenでラップしています。しかし、iframeの内容はこれらの両方を無視しているようです。オーバーフローのあるiframeが含まれています:hidden(Safariの場合)

.iframe-container { 
    border: 8px solid red; 
    border-radius: 40px; 
    overflow: hidden; 
} 

<div class="iframe-container"> 
    <iframe... /> 
</div> 

ive exaggerated the issue to better show

誰もが何か提案がありますか?

更新日 この問題はSafariに限られているようです。

+0

Chrome Working F9 –

+0

Ah!あなたが正しいです、これは私にとってもChromeでうまくいきます。おそらくこの問題はSafariに限られていますか? –

+0

なぜ誰かがこれをdownvoteしたと言わないのですか? –

答えて

1

画像とiframeのHTMLコードは表示されませんので、画像クラスに画像を与えてから画像クラスにborder-radius: 40px;を追加する必要があると思います。 彼らは完璧と一致します。

私はあなたを助けてくれることを願っています。

+0

画像がありません。上記の画像がiframeに挿入されています。また、iframeに直接ボーダー半径を設定しても、Safariには何の影響もありません。 –

+0

''あなたの注射した画像のリンクです。境界線の半径を持つスタイルを追加するだけです。私はそれがあなたのために働くと思う – dean

+0

ああ、私は今あなたが意味することを理解しています。しかし、このiframeは実際に画像オブジェクトを注入するのではなく、背景画像を持つdivを使用します。また、iframeの内容のスタイリングに影響を与える可能性があることに気づいていませんでした。 –

関連する問題