在IE7中播放其他所有内容的Flash视频

Bre*_*ett 2 css flash z-index internet-explorer-7

我花了好几个小时现在阅读IE7的问题,将Flash内容呈现在其他元素之上,特别是导航菜单(例如,这通常是下拉菜单和Flash广告横幅的问题).我已经尝试了一些建议的解决方案,但迄今为止没有一个对我有效.我将尽力解释这些情况,并对此事提出任何建议表示感谢!

更新

根据Mercator的要求,我提供了一个大型代码示例,以协助您提供任何建议.考虑下面的HTML:

<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> &ndash; </span>Panel Link</h3>
      <ul>
        <li><p>Revealed content</p></li>
          </ul>
        </div>
      </li>
    </ul>
  </div> <!-- END footpanel -->
</body>
Run Code Online (Sandbox Code Playgroud)

以下是适用于上述div的非表示性CSS选择器:

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; }
Run Code Online (Sandbox Code Playgroud)

footpanel使用jQuery驱动的弹出菜单,如果它提供任何进一步的上下文.这些菜单的300索引中的z索引显示在footpanel上方.

有问题的Flash是JW播放器播放flash视频或mp4.目前,object和embed标签位于容器div内.

我对以前的解决方案的理解是,param更改和容器div上的定位/ z-index变化的组合应该已经解决了这个问题.唉,事实并非如此.玩家位于脚踏板的顶部.

其他可能有用或可能没有用的信息是该页面是XHTML 1.0 Transitional,而Dreamweaver在HTML代码中报告1个错误:<embed>不在XHTML 1.0规范中.这一事实并不妨碍在任何测试的浏览器中查看视频,并且页面仍然可以在FF中正确显示.

提前致谢!

小智 5

我知道我在这里玩这个游戏已经很晚了,但是我想我会把你的嵌入标签中的wmode ="transparent"放在那里帮助解决这个问题,因为它会以某种方式迫使Flash服从z-index(我再次使用这个词) "某种程度上",因为有关于为什么会这样的稀疏文档 - 至少根据我的经验,文档很少.

所以无论如何,将wmode ="transparent"置于嵌入内部,然后从包含视频的实际div中删除z-index和定位.

那应该是有效的.如果没有,那么它可能是一个不同的问题,因为我刚才有完全相同的问题并且做了这两件事就为我修好了.

我希望有所帮助.

哦,你可能会考虑检查一下(这对我帮助很大):http://manisheriar.com/blog/flash_objects_and_z_index

凯西J.伯克