この記事では、p が iframe によってブロックされるいくつかの状況と、ブロックされた後の解決策を紹介します。
類似の構造:
コードは次のとおりです:
<p></p><ifram src="<a href="http://caibaojian.com"></iframe">http://caibaojian.com"></iframe</a>
最初のタイプ: 透明な背景がカバーされます
p が透明な背景を使用する場合、それが使用されているかどうか (不透明度または rgba 形式) )、 chrome を除き、他のブラウザでは p が iframe によってブロックされています。
解決策:
p 不透明な背景を使用するか、透明な背景画像を使用します。
2 番目のタイプ: z-index は ie8 では無効です
ie では、iframe に videovideo を導入すると、p の z-index が無効になります。つまり、z-index が何であっても無効になります。 p のインデックスは に設定され、すべてが iframe でカバーされます。ソース
解決策:
iframe アドレスにパラメーター wmode=opaque を追加します。アドレスが http://caibaojian.com の場合は、http://caibaojian.com?wmode=opaque に変更します。
flash は他の要素の背後にあります
さらに、flash にも z-index エラーの問題があることがわかりました。これは、上記のパラメーターを flash に追加することです
コードは次のとおりです:
<param name="wmode" value="transparent">
または
。コードは次のとおりです:
<EMBED src="<a href="https://cdn.css-tricks.com/FlashAnimation.swf">https://cdn.css-tricks.com/FlashAnimation.swf</a>" type="application/x-shockwave-flash" wMode="Transparent">
付録 iframe のいくつかのパラメータ
border
コードは次のとおりです:
<iframe border="3"></iframe>
画像とテキストのフレームの周囲のエッジの幅を設定します
frameboder
コードは次のとおりです:
<iframe frameboder="0"></iframe>
境界線を3次元に設定します(0=いいえ、1=はい)
コードは次のとおりです:
<iframe height="31" width="88"></iframe>
境界線の幅と高さ
スクロール
コードは次のとおりです:
<iframe scrolling="no"></iframe>
はい スクロールバーがあります (はい、いいえ、自動)
src
コードは次のとおりです:
<iframe src="girl.gif"></iframe>
iframeで呼び出されるファイルまたは画像を指定します(html、htm、gif、jpeg、jpg、png、txt、*.*)
概要
[関連おすすめ]
5. HTML5データリストタグとバックグラウンドデータとの動的マッチングの説明
以上がdiv が iframe によってブロックされるさまざまな状況を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。