J'ai passé des heures à lire le problème d'IE7 avec le rendu du contenu Flash par-dessus d'autres éléments, en particulier les menus de navigation (c'est souvent un problème avec les menus déroulants et l'annonce Flash) bannières, par exemple). J'ai essayé quelques-unes des solutions suggérées mais aucune n'a fonctionné pour moi jusqu'ici. Je ferai de mon mieux pour expliquer les circonstances, et j'apprécierais tout conseil en la matière!La vidéo Flash joue avec IE7
Mise à jour
À la demande de Mercator, je suis un grand FOURNIR exemple de code pour aider à tous les conseils que vous pourriez avoir. Considérez le code HTML ci-dessous:
<body>
<div id="page-wrap">
<div id="content-wrap">
<div id="main">
<h1>Page Title</h1>
<p>Paragraph text before video.</p>
<div class="video-container">
<script type="text/javascript">
AC_FL_RunContent('id','player','name','player','width','480','height','294','src','player','allowscriptaccess','always','allowfullscreen','true','flashvars','file=mp4/VIDEO_FILE.mp4','movie','player'); //end AC code
</script>
<noscript>
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="480" height="294">
<param name="wmode" value="transparent" />
<param name="movie" value="player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=mp4/VIDEO_FILE.mp4" />
<embed
wmode="transparent"
type="application/x-shockwave-flash"
id="player2"
name="player2"
src="player.swf"
width="480"
height="294"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=mp4/VIDEO_FILE.mp4"
></embed>
</object>
</noscript>
</div>
<p>Paragraph after video.</p>
</div><!-- end main -->
<div id="subContent">
<p>Sub-content.</p>
</div><!-- end subContent -->
<div id="content-clear"></div>
</div><!-- end content-wrap -->
</div><!-- end page-wrap -->
<div id="footpanel">
<ul id="mainpanel">
<li id="panel-link"><a href="#"><span class="icon"></span>Panel Link</a>
<div class="subpanel">
<h3><span> – </span>Panel Link</h3>
<ul>
<li><p>Revealed content</p></li>
</ul>
</div>
</li>
</ul>
</div> <!-- END footpanel -->
</body>
Voici les sélecteurs CSS non-présentation applicables aux divs ci-dessus:
body { /*no positioning styles applied */ }
#page-wrap { width: 100%; }
#content-wrap { width: 960px; margin 0 auto; }
#main { float: left; width: 573px; }
.video-container { position: relative; width: 480px; z-index: 1; }
#sub { float: left; width: 347px; }
#content-clear { clear: both; }
#foot-panel { position: fixed; width: 94%; bottom: 0; left: 0; z-index: 3000; }
ul#main-panel { float: left; }
Le footpanel utilise des menus flyout fonctionnant sous jQuery, si cela fournit tout autre contexte. Ces menus ont des z-index dans la gamme 300X pour apparaître au-dessus du footpanel.
Le Flash en question est un lecteur JW qui lit une vidéo flash ou un mp4. Actuellement, les balises object et embed sont à l'intérieur d'un conteneur div. Ma compréhension des solutions précédentes était que la combinaison des changements de paramètres et du changement de positionnement/d'index z sur le div du conteneur aurait dû résoudre le problème. Hélas, ce n'est pas le cas. Le joueur réside sur le dessus du footpanel.
Autre information qui peut être utile ou non, c'est que la page est XHTML 1.0 Transitional et que Dreamweaver signale 1 erreur dans le code HTML: <embed> n'est pas dans la spécification XHTML 1.0. Ce fait n'empêche pas la visualisation de la vidéo dans un navigateur testé, et la page s'affiche toujours correctement dans FF.
Merci d'avance!
Pourriez-vous s'il vous plaît essayer de nous fournir plus de HTML? En fait, essayez de réduire le HTML/CSS à un cas de test minimal. Le positionnement et les z-index vont résoudre le problème, mais sans les détails spécifiques, nous ne pouvons rien dire de plus. Selon toute vraisemblance, cela a à voir avec le positionnement de l'un des éléments parents: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html – mercator
Le commentaire précédent a été supprimé. J'ai mis à jour la question pour inclure des exemples HTML/CSS, sans inclure les méta-informations. Ou ce fichier JS que Dreamweaver lance (AC_RunActiveContent.js). CSS est agencé pour correspondre à la hiérarchie HTML - les sélecteurs dans le CSS réel sont écrits pour respecter la cascade CSS. – Brett