因此，我有一个正在处理的网页，并且在单击代表该画廊的图像后，“灯箱”效果显示覆盖在网站顶部的图片库时遇到问题。
http://themeanseasonband.com/media
它在我的 Mac 计算机（Safari、Chrome 和 Firefox）和我测试过的另一台 Mac 上的所有浏览器中都能正常工作。但由于某种原因，在任何使用相同浏览器的 Windows 计算机上（也在 IE 8 和 9 中），屏幕底部的视频位于灯箱顶部。
我已经尝试了 z-index 并包含在嵌入式视频对象中：
<param name="wmode" value="opaque" />
我已经看到其他时间建议纠正嵌入式视频的 z-index 问题，但它不起作用。
我不确定我在这里缺少什么以及为什么它可以在 Mac 上运行，而不是在 Windows 上运行。
下面是一些相关的代码。上面的链接转到该特定页面，以便您查看。抱歉，我尽量保持简短。
HTML
<div id="med_photos">
<h4 class="col_header">Photo Albums</h4>
<ul>
<li>
<img src="img/photo/dec_07_11_blackcat.jpg" alt="Photos" />
<div class="image_title">
<h5 class="img_title">12/7/2011 @ Black Cat</h5>
</div>
</li>
</ul>
</div>
<div id="med_videos">
<h4 class="col_header">Videos</h4>
<object class="video" width="300" height="169">
<param name="movie" value="http://www.youtube.com/v/TCN1vYMfEls?hl=en_US&version=3" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
<embed src="http://www.youtube.com/v/TCN1vYMfEls?hl=en_US&version=3" type="application/x-shockwave-flash" width="300" height="169" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</div>
CSS
#med_photos {
width: 1000px;
margin: 0 0 20px 0;
padding: 0;
overflow: hidden;
border-top: 1px solid #fff;
}
#med_videos {
width: 1000px;
margin: 0 0 20px 0;
padding: 0;
border-top: 1px solid #fff;
overflow: hidden;
}
#med_photos ul {
overflow: hidden;
}
#med_photos ul li {
float: left;
list-style-type: none;
position: relative;
cursor: pointer;
display: inline;
padding: 10px;
margin: 0 25px 25px 0;
}
/*Lightbox*/
.lb_backdrop {
background: rgba(0, 0, 0, 0.9);
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
}
.lb_dimmer {
background: rgba(50, 50, 50, 0.7);
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;/*Will be centered later by Jquery*/
}
.lb_canvas {
background: rgba(0, 0, 0, 0.9);
width: 50px; height: 50px;
position: fixed;
top: 0; left: 0; /*Will be centered later by Jquery*/
box-shadow: 0 0 20px 5px black;
z-index: 1;
padding: 25px;
}
/*Lightbox Controls*/
.lb_controls {
width: 400px;
background: rgba(0, 0, 0, 0.75);
position: fixed;
bottom: 10px;
color: #fff;
z-index: 5;
left: 0; right: 0; margin: 0 auto;
}
.lb_credit {
width: 280px;
background: rgba(0, 0, 0, 0.75);
position: fixed;
bottom: 50px;
color: #fff;
z-index: 5;
left: 0; right: 0; margin: 0 auto;
}
.lb_credit span {
line-height: 20px;
height: 20px;
}
.lb_controls span {
line-height: 30px;
height: 30px;
}
.lb_controls span.inactive {
opacity: 0.25;
}
.lb_previous, .lb_next {
position: absolute;
top: 0;
padding: 5px 12px;
font-family: websymbols;
font-size: 14px;
background: black;
cursor: pointer;
z-index: 5;
}
.lb_previous {
left: 0;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.lb_next {
right: 0;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.lb_title {
text-align: center;
display: block;
font-size: 14px;
text-transform: uppercase;
padding: 5px 0;
font-weight: bold;
}
加载灯箱的 Javascript 部分
function loadphoto(photonum)
{
if(lb_loading) return false;
lb_loading= true;
//The large image
large_img = new Image();
//Use data-large or the src itself if large image url is not available
large_img.src = (gallery_dir+photonum+'.jpg');
//Adding additional HTML - only if it hasn't been added before
if($(".lb_backdrop").length < 1)
{
var lb_backdrop = '<div class="lb_backdrop"></div>';
var lb_dimmer = '<div class="lb_dimmer"></div>';
var lb_canvas = '<div class="lb_canvas"></div>';
var lb_previous = '<span class="lb_previous"><</span>';
var lb_title = '<span class="lb_title"></span>';
var lb_next = '<span class="lb_next">></span>';
var lb_controls = '<div class="lb_controls">'+lb_previous+lb_title+lb_next+'</div>';
var total_html = lb_backdrop+lb_dimmer+lb_canvas+lb_controls;
$(total_html).appendTo("body");
}
//Fade in lightbox elements if they are hidden due to a previous exit
if($(".lb_backdrop:visible").length == 0)
{
$(".lb_backdrop, .lb_dimmer, .lb_canvas, .lb_controls, .lb_credit").fadeIn("slow");
}
//Display preloader till the large image loads and make the previous image translucent so that the loader in the BG is visible
if(!large_img.complete)
$(".lb_canvas").addClass("loading").children().css("opacity", "0.5")
//Disabling left/right controls on first/last items
if(currPhoto == 1)
$(".lb_previous").addClass("inactive");
else
$(".lb_previous").removeClass("inactive");
if(currPhoto == gallery_size)
$(".lb_next").addClass("inactive");
else
$(".lb_next").removeClass("inactive");
//Centering .lb_canvas
CW = $(".lb_canvas").outerWidth();
CH = $(".lb_canvas").outerHeight();
//top and left coordinates
CL = ($(window).width() - CW)/2;
CT = ($(window).height() - CH)/2;
$(".lb_canvas").css({top: CT, left: CL});
//Inserting the large image into .lb_canvas once it's loaded
$(large_img).load(function(){
//Recentering .lb_canvas with new dimensions
CW = large_img.width;
CH = large_img.height;
//.lb_canvas padding to be added to image width/height to get the total dimensions
hpadding = parseInt($(".lb_canvas").css("paddingLeft")) + parseInt($(".lb_canvas").css("paddingRight"));
vpadding = parseInt($(".lb_canvas").css("paddingTop")) + parseInt($(".lb_canvas").css("paddingBottom"));
CL = ($(window).width() - CW - hpadding)/2;
CT = ($(window).height() - CH - vpadding)/2;
//Animating .lb_canvas to new dimentions and position
$(".lb_canvas").html("").animate({width: CW, height: CH, top: CT, left: CL}, 500, function(){
//Inserting the image but keeping it hidden
imgtag = '<img src="'+large_img.src+'" style="opacity: 0;" />';
$(".lb_canvas").html(imgtag);
$(".lb_canvas img").fadeTo("slow", 1);
//Displaying the image title
title = gallery_title+" - "+currPhoto+" of "+gallery_size
$(".lb_title").html(title);
lb_loading= false;
$(".lb_canvas").removeClass("loading");
})
})
}