CSS Google Chrome、Flash 和 z-index 错误行为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4313364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Chrome, Flash and z-index wrong behaviour
提问by MintDeparture
Google Chrome is displaying the z-index of a Flash video incorrectly.
Google Chrome 无法正确显示 Flash 视频的 z-index。
Take a look at http://maxusglobal.com/in Firefox or Internet Explorer.
在 Firefox 或 Internet Explorer 中查看http://maxusglobal.com/。
Now take a look at it in Chrome.
现在在 Chrome 中看看它。
The big video at the top of the page should have a "preview" image z-indexed over the top of it. It does in Firefox and Internet Explorer, but not Google Chrome.
页面顶部的大视频应该有一个“预览”图像，在它的顶部有一个 z 索引。它适用于 Firefox 和 Internet Explorer，但不适用于 Google Chrome。
This doesn't seem to be a WebKitthing, but specifically a Chrome bug.
这似乎不是一个WebKit 的东西，而是一个 Chrome 错误。
I have tried all the wmodes, (opaque, window and transparent), but this doesn't fix it. I also changed the z-index of the Flash box, but it is still not working.
我已经尝试了所有 wmodes，（不透明、窗口和透明），但这并不能解决它。我也改变了Flash盒子的z-index，但是还是不行。
回答by Zain Shaikh
Add wmode="transparent"to your <embed>tag. Like the following.
添加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">
And hide the div of the helloimage if that is not necessary.
hello如果没有必要，隐藏图像的 div 。
I hope this helps!
我希望这有帮助！
回答by Stuart Burrows
There are a couple of options here as I see them:
在我看来，这里有几个选项：
Option 1
选项1
Use the wmode tag and you need to set this as the object is rendered. Adding it later will not work
(ref1)(ref2)
使用 wmode 标记，您需要在渲染对象时设置它。稍后添加它将不起作用
(ref1) (ref2)
Using opaque should allow you to target the object with CSS z-index styles. Be aware that you should set this value in the <embed>tag as well as as a param
(ref3)(ref4)
使用 opaque 应该允许您使用 CSS z-index 样式定位对象。请注意，您应该在<embed>标签中设置此值以及param
(ref3) (ref4)
Option 2
选项 2
Hide the object until a user has clicked on your preview button. I spent ages tracking down the javascript that you used before I noticed that Sotiris had said the same thing. I believe this is your code here:
隐藏对象，直到用户单击您的预览按钮。在我注意到 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;
});
I would amend one line to:
我将一行修改为：
$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});
And use CSS to set visibility to hidden by default. Depending on your no javascript support requirements you may need to modify that.
并使用 CSS 将可见性设置为默认隐藏。根据您的无 javascript 支持要求，您可能需要修改它。
The third link provided here is a rather good article on wmodes and how they work - I recommend checking that out if you decide to go with option 1 and run into trouble.
此处提供的第三个链接是一篇关于 wmodes 及其工作原理的相当不错的文章 - 如果您决定使用选项 1 并遇到麻烦，我建议您检查一下。
Hope that helps!
希望有帮助！
回答by mongo
I too was having a problem with the z-index of embedded Flash objects when using Google Chrome 8. Everything worked perfectly in IE 7. lnrbob hit the nail on the head with his option 1 solution. I had set wmode to opaque in the <embed>tag; but I neglected to add wmode as a <param>tag. Once I added <param name="wmode" value="opaque"/>between the <object>tag and the <embed>tag, the z-index started to work perfectly in Chrome without breaking IE.
使用 Google Chrome 8 时，我也遇到了嵌入式 Flash 对象的 z-index 问题。在 IE 7 中一切正常。lnrbob 的选项 1 解决方案一针见血。我在<embed>标签中将 wmode 设置为不透明；但我忽略了添加 wmode 作为<param>标签。一旦我<param name="wmode" value="opaque"/>在<object>标签和<embed>标签之间添加，z-index 开始在 Chrome 中完美运行而不会破坏 IE。
回答by jiucai
the following code works in ie,firefox,opera, but not worked on chrome(version 21)
以下代码适用于 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>
回答by Sotiris
It doesn't work in Firefox 3.6 and Opera 10, also in Windows.
它不适用于 Firefox 3.6 和 Opera 10，也不适用于 Windows。
Possible solution: Just add in your CSS visibility:hidden;for the selector #both_video_and_preview_image #video_wrapper.
可能的解决方案：只需visibility:hidden;为选择器添加 CSS #both_video_and_preview_image #video_wrapper。
Then add jQuery code (I see that you use the library), so when the user click the preview image then the visibility change for the above selector to visible.
然后添加 jQuery 代码（我看到您使用了该库），因此当用户单击预览图像时，上述选择器的可见性更改为可见。
$("#page_video_preview_image").click(function() {
$("#both_video_and_preview_image #video_wrapper").css("visibility","visible");
})
回答by adamzwakk
Have you tried using SWFObject and loading it like that?
您是否尝试过使用 SWFObject 并像这样加载它？
