IE 10+中Flash上​​的HTML叠加

时间:2013-08-15 16:18:57

标签: flash internet-explorer overlay

我在Flash对象上覆盖DIV中的文本时遇到了一个奇怪的问题。我知道WMODE参数是IE 9及以下版本的关键,我能用这个代码在FF,Safari,IE 8和9等中正常工作(我没有使用z-index或其他任何东西)在我的CSS中,只是绝对定位):

<!--[if IE]>
<object width="960" height="280" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
   <param name="movie" value="/assets/flash.swf">
   <param name="wmode" value="opaque">
<![endif]-->

<!--[if !IE]>-->
<object width="960" height="280"
        data="/assets/flash.swf"
        type="application/x-shockwave-flash">
<!--<![endif]-->
    <img src="image.jpg" />
</object>
<div class="copy-left" >
    <h2 style="color:#FFFFFF">Title</h2>
    <p style="color:#FFFFFF">Text 2</p>
</div>

但是出于某种原因,在IE 10和11中,div出现在Flash电影的背后,而不是在它之上......就好像WMODE根本不重要而且对象仍然希望出现在一切之上

我很感激任何想法,我很难过。

1 个答案:

答案 0 :(得分:1)

事实证明,IE 10+并没有注意条件评论,因此忽略了wmode。

我通过向两个对象添加<param name="wmode" value="opaque">来修复它,无论它们是否为IE。最终的代码是:

<!--[if IE]>
<object width="960" height="280" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
   <param name="movie" value="/assets/flash.swf">
   <param name="wmode" value="opaque">
<![endif]-->

<!--[if !IE]>-->
<object width="960" height="280"
        data="/assets/flash.swf"
        type="application/x-shockwave-flash">
        <param name="wmode" value="opaque">
<!--<![endif]-->
    <img src="image.jpg" />
</object>
<div class="copy-left" >
    <h2 style="color:#FFFFFF">Title</h2>
    <p style="color:#FFFFFF">Text 2</p>
</div>