59

IE8でPDFファイルを含むにz-index取り組むことができません。iframeGoogleChromeで動作します。

例（JSFiddle）：

HTML

<div id="div-text">
      <div id="shouldBeOnTop">my text that should be on top</div>
</div>
<div id="div-frame">
    <iframe src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"/>
</div>

CSS

#div-text{
    position:relative;
    left:210px;
    top:20px
}

#shouldBeOnTop{
    position:relative;
    right:60px;
    background-color:red;
    width:100px;
    z-index:2;
}

#div-frame{
    position:relative;
     z-index:1;
}
4

4 に答える 4

90

更新： Matthew Wiseには、特に私のアプローチに問題がある場合や醜いハックが嫌いな場合に検討する必要のある、非常に賢い代替ソリューションがあります。

IEのウィンドウ要素を他の要素でカバーする方法はありますが、気に入らないでしょう。

背景：ウィンドウ要素とウィンドウなし要素

レガシーIEは、要素をウィンドウ付きとウィンドウなしの2つのタイプに分類します。

divのような通常の要素inputはウィンドウレスです。それらはブラウザ自体によって単一のMSHTML平面でレンダリングされ、互いのz順序を尊重します。

MSHTMLの外部でレンダリングされた要素はウィンドウ化されます; たとえば、select（OSによってレンダリングされる）およびActiveXコントロール。それらは互いのzオーダーを尊重しますが、すべてのウィンドウのない要素の上にペイントされた別個のMSHTML平面を占有します。

唯一の例外はiframeです。IE 5ではiframe、ウィンドウ要素でした。これはIE5.5で変更されました。現在はウィンドウのない要素ですが、下位互換性の理由から、z-indexが低いウィンドウ要素を描画します。

言い換えるiframeと、ウィンドウ要素とウィンドウなし要素の両方のz-indexを尊重します。iframeウィンドウ要素の上に配置すると、上に配置されたウィンドウのない要素iframeが表示されます。

これはどういう意味ですか

PDFは常に通常のページコンテンツの上にペイントされます— <a href="http://blogs.msdn.com/b/ie/archive/2006/01/17/for-the-select-few.aspx "rel ="noreferrer">同様のselect要素はIE7までありました。修正はiframe、コンテンツとPDFの間に別の要素を配置することです。

デモ

jsFiddle： http: //jsfiddle.net/Jordan/gDuCE/

コード

HTML：

<div id="outer">
    <div id="inner">my text that should be on top</div>
    <iframe class="cover" src="about:blank"></iframe>
</div>

<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe>

CSS ：

#outer {
    position: relative;
    left: 150px;
    top: 20px;
    width: 100px;
    z-index: 2;
}

    #inner {
        background: red;
    }

    .cover {
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

#pdf {
    position: relative;
    z-index: 1;
}

サポート

これはテスト済みであり、IE 7–9で機能するはずです。他のブラウザのDOMに表示されることに不安を感じる場合は、JavaScriptで追加するか、IEのみの条件付きコメントでラップすることができます。

<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->
于 2012-10-19T15:07:56.087 に答える
8

追加のIFRAMEを使用した回避策は単純なケースでは機能しますが、透明性を尊重するようにオーバーレイを取得するために午前中を費やしました。基本的に、アプリケーションにはモーダルポップアップがあり、ポップアップの背後にあるフルウィンドウオーバーレイが「グレー表示」（背景色は黒、不透明度0.25）にレンダリングされ、ポップアップがモーダルであることをユーザーに示します。回避策を使用すると、埋め込まれたPDFビューがウィンドウの残りの部分でグレー表示されることはないため、「アクティブ」に見え、実際にPDFビューアを操作できます。

私たちの解決策は、Mozillaのpdf.jsライブラリを使用することです：https ：//github.com/mozilla/pdf.js/-テストURLhttp: //mozilla.github.com/pdf.js/web/を指すIFRAMEを埋め込みますViewer.html？file = compressed.tracemonkey-pldi-09.pdfは、z-index、透明性、ロット、ハックを必要とせずに、箱から出してすぐに機能します。PDFのコンテンツを表す標準のHTMLを生成する独自のレンダリングエンジンを使用しているようです。

于 2016-08-16T12:36:04.503 に答える
4

私は同じ問題を修正しようとしていましたが、私のシナリオは似ていました。私は自分のページにYouTubeビデオをレンダリングしようとしていて、ビデオの上にdivいくつかの情報を配置したいと思いました。

しかし、YouTubeビデオがに含まれているので、私はそれをするiframeことができませんでした。
z-index私が要素に与えたものに関係なく。

その後、この投稿は役に立ちました-https://stackoverflow.com/a/9074366/1484384

基本的にはwmode。上記の投稿をチェックして、操作方法を確認してください。

その投稿からのいくつかのコードは次のとおりです。

<iframe title="YouTube video player" width="480" height="390 src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent">

または

//z-indexyoutubeビデオの埋め込みを修正

$(document).ready(function (){
  $('iframe').each(function(){
    var url = $(this).attr("src");
    $(this).attr("src",url+"?wmode=transparent");
  });
});
于 2013-10-30T13:56:14.660 に答える
0

jQueryUIを使用している人のために、私は次の解決策を思いつきました。

次の関数を追加し、ダイアログのopenイベントから呼び出します。ブラウザがIEの場合、iFrameをモーダルオーバーレイに挿入するか、ダイアログの背景に追加します。

// Simple IE Detection.
var isIE = Object.hasOwnProperty.call(window, "ActiveXObject");

// Fix IE bug where an iFrame from below will cover a dialogs contents.
function dialogIFrameFix(event /* object */) {
    setTimeout(function () {
        if (event && event.target && isIE) {
            var $dialog = $(event.target.parentElement);
            // Get the modal overlay if found.
            var $fixTarget = $dialog.next('.ui-widget-overlay');
            // Use the dialog body if there is no overlay.
            if (!$fixTarget || !$fixTarget.length)
                $fixTarget = $dialog;
            // Add as first child so it is covered by all of the other elements
            $fixTarget.prepend('<iframe class="iFrameFix" src="about:blank" style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe>');
        }
    }, 10);
}

次に、次のように呼び出します。

.dialog({
    open: function (event, ui) {
        dialogIFrameFix(event);
    }
});
于 2019-07-12T16:31:21.597 に答える