Google Chrome、Flash 和 z-index 错误行为答案

【问题标题】：Google Chrome, Flash and z-index wrong behaviourGoogle Chrome、Flash 和 z-index 错误行为
【发布时间】：2011-05-17 20:02:44
【问题描述】：

Google Chrome 无法正确显示 Flash 视频的 z-index。

在 Firefox 或 Internet Explorer 中查看 http://maxusglobal.com/。

现在在 Chrome 中查看它。

页面顶部的大视频应该在其顶部有一个“预览”图像 z-indexed。它适用于 Firefox 和 Internet Explorer，但不适用于 Google Chrome。

这似乎不是 WebKit 的事情，而是一个 Chrome 错误。

我已经尝试了所有的 wmode，（不透明、窗口和透明），但这并不能解决问题。我还更改了 Flash 框的 z-index，但仍然无法正常工作。

【问题讨论】：

没有链接或完整的标记，我们所说的一切都只是一个疯狂的猜测。
您检查的是哪个 Firefox 版本？我在 IE 中检查了它的工作正常，但在 FF 和 Chrome 中看不到预览图像。
就我而言，我在使用 IE 和 FF 时遇到了问题，它在 Chrome 中运行。在 FF 和 IE 中，flash 错误地重叠了动态弹出对象。它由<param name="wmode" value="transparent"> 在<object> 标记内修复，如css-tricks.com/snippets/html/keep-flash-behind-other-elements 建议的那样
Smickie，您可能应该更好地表述您的问题，目前尚不清楚您的情况与什么重叠。

标签： css flash google-chrome z-index wmode

【解决方案1】：

将wmode="transparent" 添加到您的<embed> 标记中。像下面这样。

<embed wmode="transparent" 
       height="314" width="516"
       type="application/x-shockwave-flash" 
       id="player"
       name="page_player" 
       src="/swfs/player.swf" 
       allowscriptaccess="always"
       allowfullscreen="true" 
       flashvars="file=/attachments/files/u_t_o_N_1.mp4">

如果没有必要，隐藏 hello 图像的 div。

我希望这会有所帮助！

【讨论】：

设置 wmode="opaque" 也可以。此外，如果您使用
此解决方案不适用于 Chrome 19.0.1084.52 m、Safari 5.1.7，但适用于 IE9。
有谁知道是否有我可以跟踪的错误提交？
在<object> 标签内，人们会按照css-tricks.com/snippets/html/keep-flash-behind-other-elements 的建议使用<param name="wmode" value="transparent">

【解决方案2】：

在我看来，这里有几个选项：

选项 1

使用 wmode 标签，您需要在渲染对象时设置它。稍后添加将不起作用
(ref1) (ref2)

使用 opaque 应该允许您使用 CSS z-index 样式定位对象。请注意，您应该在 <embed> 标记以及 param 中设置此值
(ref3) (ref4)

选项 2

隐藏对象，直到用户单击您的预览按钮。在我注意到 Sotiris 说了同样的话之前，我花了很长时间追踪你使用的 javascript。我相信这是您的代码：

$('#play_video_box').click(function(){

if(app.isiPhone() == "iphone" || app.isiPhone() == "ipad"){
return true;
}

$(this).fadeOut('fast');
$('#page_video_preview_image').fadeOut('fast');
var player = document.getElementById('player');
player.sendEvent('PLAY');
return false;
});

我会将一行修改为：

$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});

并使用 CSS 将可见性设置为默认隐藏。根据您的无 javascript 支持要求，您可能需要对其进行修改。

此处提供的第三个链接是一篇关于 wmodes 及其工作原理的相当不错的文章 - 如果您决定使用选项 1 并遇到麻烦，我建议您检查一下。

希望有帮助！

【讨论】：

您的第一点值得再次强调：在对象渲染后添加 wmode 将不起作用。你必须提前抓住它。因此，再多的在 Firebug 和 kin 中搞砸它都不会让你走到任何地方。

【解决方案3】：

在使用 Google Chrome 8 时，我也遇到了嵌入式 Flash 对象的 z-index 问题。在 IE 7 中一切正常。lnrbob 用他的选项 1 解决方案一针见血。我在<embed> 标签中将 wmode 设置为不透明；但我忽略了将 wmode 添加为 <param> 标签。一旦我在<object> 标签和<embed> 标签之间添加了<param name="wmode" value="opaque"/>，z-index 就开始在 Chrome 中完美运行而不会破坏 IE。

【讨论】：

【解决方案4】：

它在 Firefox 3.6 和 Opera 10 中不起作用，在 Windows 中也是如此。

可能的解决方案：只需为选择器 #both_video_and_preview_image #video_wrapper 添加 CSS visibility:hidden;。

然后添加 jQuery 代码（我看到您使用了该库），因此当用户单击预览图像时，上述选择器的可见性变为可见。

$("#page_video_preview_image").click(function() {
    $("#both_video_and_preview_image #video_wrapper").css("visibility","visible");
})

【讨论】：

【解决方案5】：

以下代码在 ie,firefox,opera 中有效，但在 chrome（版本 21）上无效

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="250">
<param name="movie" value="http://img.emarbox.com/dsp/img/300x250.swf">
<param name="quality" value="high"></param>
<param name="wmode" value="opaque"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://img.emarbox.com/dsp/img/300x250.swf" wmode="opaque" allowfullscreen="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="250"></embed>
</object>

<div style="cursor: pointer; margin-top:-250px; width:300px; height:250px; z-index:1; visibility: visible;">
<a href="http://www.emarbox.com" target="_blank" >
<img border="0" src="http://img.emarbox.com/dsp/img/flash_blank.gif" width="300" height="250" border="0" /></a>
</div>

【讨论】：

【解决方案6】：

您是否尝试过使用 SWFObject 并像这样加载它？

【讨论】：