Question

我花了好几个小时现在阅读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>

以下是适用于上述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; }

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

有问题的Flash是JW播放器播放Flash视频或mp4。目前，object和embed标签位于容器div中。

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

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

提前致谢！

Answer 1

我知道我已经迟到了这个游戏，但是我认为我会抛弃你的嵌入标签中的wmode =“transparent”有助于解决这个问题，因为它会以某种方式迫使Flash服从z-index（同样，我使用“某种程度”这个词，因为有关于为什么会这样的稀疏文档 - 至少从我的经验来看，文档很少。）

所以无论如何，在你的嵌入中放置wmode =“transparent”，然后从包含视频的实际div中删除z-index和position。

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

我希望有所帮助。

哦，你可以考虑检查一下（这对我来说很有帮助）：http://manisheriar.com/blog/flash_objects_and_z_index

Casey J. Burk

Answer 2

您是否尝试从position: relative删除z-index: 1和video-container？

这些属性实际上只会增加问题，而不是减少它们。我以为你可能需要它们，因为在页面的其余部分有很多定位，但情况似乎并非如此。

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

2 个答案: