div が iframe に覆われるいくつかの状況とその解決策

div が iframe に覆われるいくつかの状況とその解決策

類似の構造:

コードをコピー
コードは次のとおりです。

<div></div><ifram src="<a href="http://caibaojian.com"></iframe">http://caibaojian.com"></iframe</a>>

1つ目:透明な背景がブロックされている

div が透明な背景を使用する場合、それが不透明度または RGBA 形式であるかどうかに関係なく、Chrome を除く他のすべてのブラウザでは、div が iframe によって覆われていると表示されます。

解決:

div は不透明な背景または透明な背景画像を使用します。

2番目のタイプ: z-indexはIE8では無効です

IE では、iframe 内でビデオ再生を導入すると、div の z-index が無効になります。つまり、div の z-index が何に設定されていても、iframe によってカバーされてしまいます。ソース

解決:

iframe アドレスにパラメータ wmode=opaque を追加します。アドレスが http://caibaojian.com の場合は、http://caibaojian.com?wmode=opaque に変更します。

他の要素の背後にフラッシュする

ちなみに、Flashにもこのz-indexの無効な問題があることがわかりました。同じことがFlashにも上記のパラメータを追加します


コードをコピー
コードは次のとおりです。

<param name="wmode" value="透明">

または


コードをコピー
コードは次のとおりです。

<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 のいくつかのパラメータ

国境


コードをコピー
コードは次のとおりです。

<iframe の境界線="3"></iframe>

フレームの周囲の境界線の幅を設定します

フレームボーダー


コードをコピー
コードは次のとおりです。

<iframe フレームボーダー="0"></iframe>

境界線が 3 次元かどうかを設定します (0 = いいえ、1 = はい)

高さ、幅


コードをコピー
コードは次のとおりです。

<iframe 高さ="31" 幅="88"></iframe>

境界線の幅と高さを設定する

スクロール


コードをコピー
コードは次のとおりです。

<iframe スクロール = "いいえ"></iframe>

スクロールバーはありますか(はい、いいえ、自動)

ソース


コードをコピー
コードは次のとおりです。

<iframe src="女の子.gif"></iframe>

iframe によって呼び出されるファイルまたは画像を指定します (html、htm、gif、jpeg、jpg、png、txt、*.*)

まとめ<br />以上がこの記事の全内容です。皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問があれば、メッセージを残してコミュニケーションを取ることができます。

<<:  要素タイムラインの実装

>>:  MySQLのエンコードの不一致によって発生する可能性のある問題

推薦する

MySQLクエリ文の実行プロセスの詳細な説明

目次1. クライアントとサーバー間の通信方法2. クエリキャッシュ3. クエリ最適化処理4. クエリ...

Tomcat が設定ファイルを外部に配置するためのソリューション

質問通常の開発では、プロジェクトを Tomcat にデプロイする場合、プロジェクトを war パッケ...

タグのターゲットリンクを iframe に向ける方法

コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...

Reactにおけるキーの役割の詳細な説明

目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...

...

Linux ソースコードの解析 epoll

目次1. はじめに2. シンプルなepollの例2.1、epoll_create 2.2、構造体イベ...

MySQLテーブルをコピーする方法

目次1.mysqlダンプ実行プロセス:特徴2. CSVファイルをエクスポートする(最も柔軟性が高い)...

メタタグの詳しい説明(メタタグの役割)

個人のウェブサイトがどんなに素晴らしいものであっても、サイバースペースの広大な海に浮かぶ小さなボート...

mysqlのkey_lenの計算方法についての簡単な説明

MySQL の explain コマンドは SQL のパフォーマンスを分析できます。その 1 つが ...

docker を使用して Windows 10 Home バージョンで Laravel 開発環境を構築する方法の詳細なチュートリアル

オペレーティング·システム: Win10 ホームエディションDockerをインストールします:公式サ...

MySQL デッドロックのトラブルシューティングの全プロセス記録

【著者】 Liu Bo: Ctrip テクニカル サポート センターのシニア データベース マネージ...

win10環境でDockerをインストールする実装

1. Docker公式サイトにアクセスするまず、Dockerの公式ウェブサイトにアクセスして、最新の...

Nodejs-cluster モジュールの知識ポイントの概要と使用例

面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...

Linux でファイル内の特定の文字の数を数える方法

ファイル内の文字列の数を数えることは、実際には砂の中の石を探すようなものです。ある人は、石を見た後に...