我搜索了主题并尝试了很长一段时间来自己发现这个问题的答案,但问题是如此之小以至于我无法弄明白。
在IE7上 - 灯箱显示如下:
在IE8上 - 它显示如下:
实际灯箱的白色背景无法在IE7中显示。我怎样才能让它看起来像在IE8上一样?我可以在CSS文件中遗漏一些东西吗?
另外(不那么重要),我怎么能让角落弯曲? - 因为它出现在firefox中
lightbox.js javascript代码
document.write('<script src="'+lb_root_dir+'/javascript/jquery-1.4.2.min.js"></script>');
document.writeln('<script src="'+lb_root_dir+'/javascript/jquery.tools.min.js"></script>');
document.writeln('<script src="'+lb_root_dir+'/javascript/jquery.curvycorners.min.js"></script>');
document.writeln('<link rel="stylesheet" type="text/css" href="'+lb_root_dir+'/css/overlay.css">');
var lbdiv = 0;
function lightbox(title, url, width, height){
lbdiv++;
var id = "lb"+lbdiv;
var maxheight = 500;
if(height > maxheight) { height=maxheight; }
var overlay = '<div class="close"><a onMouseover="lbRollover(\'cb'+id+'\')" onMouseout="lbRollover(\'cb'+id+'\')">close';
overlay += '<img src="'+lb_root_dir+'/images/close_normal.jpg" id="cb'+id+'" alt="Close" /></a></div><div class="lbtitle">';
overlay += title+ '</div> <div class="lbbody" style="height:' + height + 'px; width:' + width + 'px;">';
//overlay += '<iframe src="' + url + '" height=' + height + ' width=' + width + ' style="border:none;"></div>';
overlay += '<iframe src="' + url + '" height=' + (height-56) + ' width=' + width + ' marginheight="0" marginwidth="0" ';
overlay += 'frameborder="0" style="border:none;"></div>';
var myElement = document.createElement('div');
myElement.setAttribute("id", id);
myElement.setAttribute("class", "overlay lbround");
myElement.setAttribute("height", height);
myElement.setAttribute("width", width);
myElement.style.height = height+"px";
myElement.style.width = width+"px";
var lightboxElem = document.body.appendChild(myElement);
lightboxElem.innerHTML = overlay;
$('.lbround').redrawCorners();
$("#"+id).overlay({
mask:{ color:'#000', opacity:'0.4'},
load: true,
top: 'center'
});
}
function lbRollover(imageid){
var curimg = document.getElementById(imageid).src;
var newimg = curimg.replace('normal','rollover');
if(newimg==curimg) { newimg = curimg.replace('rollover','normal'); }
document.getElementById(imageid).src = newimg;
}