z-index ne fonctionne pas dans IE7 / IE8 avec pdf dans iframe

Question

Je ne parviens pas à obtenir z-index sur un iframe contenant un fichier pdf avec IE8. Cela fonctionne avec Google Chrome. Voir l'exemple de js fiddle: http://jsfiddle.net/5J6zL/9/ qui utilise cet exemple de code:

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;
}
 

Merci de votre aide

Answer 1

J'en connais une technique fiable pour occlure les contrôles en mode fenêtré dans IE avec d'autres éléments, mais vous n'allez pas aimer ça.

Contexte: en mode fenêtré et sans fenêtre éléments

IE catégorise les éléments en deux catégories: les fenêtré et sans fenêtre. Régulière des éléments comme l' div et input sont sans fenêtre, rendue directement par le MSHTML moteur. Fenêtre des éléments, cependant, sont rendus dans un autre MSHTML avion et obtenir peint sur tous les éléments intrusion dans l'espace qui leur est réservé. Ils respectent z-index pour l'autre, mais toujours de la peinture sur le haut de la fenêtre des éléments.

La seule exception à cette règle est - iframe. Dans IE 5 iframe a été fenêtré élément. Cela a été changé dans IE 5.5; c'est maintenant une fenêtre de l'élément, mais en arrière pour des raisons de compatibilité, il va encore tirer sur fenêtré éléments avec une baisse de z-index. Surtout, il respecte également le z-index pour windowless éléments-si vous placez un iframe sur une fenêtre de l'élément, tout sans fenêtre des éléments de la position iframe sera visible.

Ce que cela signifie

Essentiellement, le PDF est peint sur la partie supérieure de la normale le contenu de la page-comme select des éléments ont été jusqu'à IE 7. La meilleure solution est d'utiliser un autre iframe placé entre votre contenu et le format PDF.

Démo

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

Code

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;
}

Soutien

Cela a été testé et doit travailler dans IE 7-9. Si vous vous sentez persnickety à ce sujet en montrant dans les DOM pour les autres navigateurs, vous pouvez l'ajouter avec du JavaScript ou de l'envelopper dans un IE seul commentaire conditionnel:

<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->

Answer 2

J'Avais essayé de résoudre le même problème et mon scénario était similaire. J'ai essayé de rendre une Vidéo de youtube sur ma page et sur le dessus de la vidéo, j'ai voulu placer quelques - div avec quelques informations.

Mais la vidéo youtube contenue dans un iframe n'était pas de me laisser faire. Quel que soit le
z-index que j'ai donné aux éléments.

Alors ce poste aidé - http://stackoverflow.com/a/9074366/1484384

Fondamentalement, de son sur l' wmode. Vérifier le post ci-dessus pour voir comment travailler avec elle.

Voici un peu de code à partir de ce post:

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

Ou

//Fix z-index youtube intégration de vidéos.

$(document).ready(function (){
  $('iframe').each(function(){
    var url = $(this).attr("src");
    $(this).attr("src",url+"?wmode=transparent");
  });
});