IE-8 iframe和flash对象忽略z-index？

Question

我有以下div，我正在尝试使iframe层位于my_flash的前面。这是一个常见的问题，我已经阅读了所有我能找到的解决方案，但我仍然在IE8中遇到问题。顺便说一下，我正在使用SWFobject。

以下是源代码：

<script type="text/javascript">
swfobject.embedSWF("index.swf", "my_flash", "100%", "100%", "8.0.0");
swffit.fit("my_flash",900,650);
</script>

<div id="my_flash" style="z-index:1;"></div>

<div  style="border:none; overflow:hidden; width:50px; height:21px; z-index:9999; position: absolute; bottom: 5px; left: 110px;" >
<iframe src="http://www.facebook.com/plugins/like.php?blah.html" scrolling="no" frameborder="0" allowTransparency="true"  style="z-index:9998"/>
</div>

Answer 1

不幸的是，z-index不会影响Flash Player。参见本例：http://demos.learnswfobject.com/html-over-swf/dynamic.html (Related tutorial)

在上面链接的示例中，父元素具有position:"relative"，而HTML元素具有position:"absolute"。SWF不需要指定position。所有元素都没有指定z-index。SWF需要将wmode设置为opaque或transparent。wmode:"opaque"比wmode:"transparent"更可取，因为众所周知，transparent会导致问题，并且比opaque使用更多的处理能力。

试试这个：

<style type="text/css"> 
/* establish relationship with child elements */
#wrapper { position: relative; }

/* this element will automatically appear overtop 
   of the wmode=opaque SWF without needing z-index */
#myiframe { position: absolute; }

/* No CSS needs to be specified for the SWF */
#myswf { }
</style>

<div id="wrapper"> 
    <iframe id="myiframe" src="mypage.html"></iframe> 
    <div id="myswf">This will be replaced by SWFObject</div> 
</div> 

Answer 2

使用SWFObject嵌入时，应设置Flash对象的wmode参数。

Here就是这样做的一个简短的教程。

以下是针对您的问题的修改代码：

<script type="text/javascript">
  swfobject.embedSWF("index.swf", "my_flash", "100%", "100%", "8.0.0", null, { wmode: "transparent" });
  swffit.fit("my_flash",900,650);
</script>

Answer 3

var flashvars = {};
var params = {};
params.wmode = "transparent";
var attributes = {};

swfobject.embedSWF("index.swf", "my_flash", "100%", "100%", "8.0.0", '/swfobject/expressInstall.swf',
    flashvars, params, attributes);