2017-03-24 3 views
0

As you can see の場合、ウィジェットの周囲に1pxの境界線があります。 iOSにのみ表示されます。私は、CSSはインラインフレーム内の別のドメインから来る要素が、クライアントに影響を与えないことを知ってこのSoundCloudウィジェットの周りに現れる1ピクセルの枠線を削除する方法はありますか?

<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/307068209&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true" scrolling="0" frameborder="0"></iframe> 

:これはIFRAMEある

.widget { 
    ... 
    border: 1px solid #e5e5e5; 
    ... 
} 

:私はインスペクタでこれを引き起こしてCSSを見ることができますそれは悪く見えると言います。これを表示させるために私がやっていることはありますか?そうでない場合は、これを削除する方法はありますか?

答えて

0

は、私はこのポストからアドバイスを受けてしまった:

CSS: Inset shadow by parenting div over iframe

をそして、この不良少年を追加しました:

.iframe-wrapper:before{ 
    position: absolute; 
    content: ''; 
    top: 0; 
    left: 0; 
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .4) inset; 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
} 

十分に境界線を隠します
0

iframe全体のうち最も外側にある1ピクセルを非表示にすることができますが、それは望ましい効果がある場合とない場合があります。 http://codepen.io/anon/pen/evKLMr

div { 
    overflow: hidden; 
    width:398px; 
    height:198px; 
} 

iframe { 
    position: relative; 
    top:-1px; 
    left:-1px; 
    width: 400px; 
    height: 200px; 
} 
関連する問題