div が iframe によってブロックされるさまざまな状況を解決する

Y2J
リリース: 2017-05-23 09:29:37
オリジナル
4697 人が閲覧しました

この記事では、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、*.*)

概要
[関連おすすめ]

1. Htmlの無料ビデオチュートリアル

2. HTML にリンクを挿入する方法を説明します

3.

nodejs で HTML を解析する方法を説明します

4. HTML と CSS の知識ポイントの非常に包括的な概要を共有します

5. HTML5データリストタグとバックグラウンドデータとの動的マッチングの説明

以上がdiv が iframe によってブロックされるさまざまな状況を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート