JQery图片弹出兼容有关问题

JQery图片弹出兼容问题

本帖最后由 u012234713 于 2014-01-25 14:49:41 编辑

http://sc.chinaz.com/jiaobendemo.aspx?downloadid=131023151358431
在IE7 和IE8下会出现不兼容问题
弹出的图片位置会发生变化，出现不居中问题。
请大家帮我看看什么原因

或提供类似JS脚本

------解决方案--------------------
把zoom.css 里面的
#zoom .content 加 border: 0px; 就可以居中了
在IE8我试了下。IE6 8 9 FF都可以
------解决方案--------------------
1:r = parseInt(n.css("borderLeftWidth"))
------解决方案--------------------
0,//你原有的错误在这里。修正为：取不到值时默认为0

2:为使遮罩层效果生效,且使相关事件在各浏览器中达成一致.使用独立的遮罩层.[IE7/IE8/FF/Chrome]

修正如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>jQuery zoom相册弹出层插件 - 站长素材</title>

<style type="text/css"> 

body{overflow-y:scroll;font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;background:#f4f4f4;padding:0;margin:0;}

h1{font-size:31px;line-height:32px;font-weight:normal;margin-bottom:25px;}

a,a:hover{border:none;text-decoration:none;}

img,a img{border:none;}

pre{overflow-x:scroll;background:#ffffff;border:1px solid #cecece;padding:10px;}

.clear{clear:both;}

.zoomed > .container{-webkit-filter:blur(3px);filter:blur(3px);}

.container{width:505px;margin:0 auto;z-index:1;}

.gallery{list-style-type:none;float:left;background:#ffffff;padding:20px 20px 10px 20px;margin:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);box-shadow:0 1px 3px rgba(0,0,0,0.25);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}

.gallery li{float:left;padding:0 10px 10px 0;}

.gallery li:nth-child(6n){padding-right:0;}

.gallery li a,.gallery li img{float:left;}


/*独立的遮罩层*/

#overlayer{

	z-index: 10000;

	position: fixed;

	top: 0;

	left: 0;

	display: none;

	width: 100%;

	height: 100%;

	background: #666666;

}


#zoom {

	z-index: 99990;

	position: fixed;

	top: 0;

	left: 0;

	display: none;

	width: 100%;

	height: 100%;

	/*原有的filter定义移除*/

}

#zoom .content {


	position: absolute;

	top: 50%;

	left: 50%;

	width: 200px;

	height: 200px;

	background: #ffffff no-repeat 50% 50%;

	padding: 0;

	margin: -100px 0 0 -100px;

	box-shadow: -20px 20px 20px rgba(0, 0, 0, 0.3);

	border-radius: 4px;

}

#zoom .content.loading {

	background-image: url('../img/loading.gif');

}

#zoom img {

	display: block;

	max-width: none;

	background: #ececec;

	box-shadow: 0 1px 3px rgba(0,0,0,0.25);

	border-radius: 4px;

}

#zoom .close {

	z-index: 99993;

	position: absolute;

	top: 0;

	right: 0;

	width: 49px;

	height: 49px;

	cursor: pointer;

	background: transparent url('../img/icons/close.png') no-repeat 50% 50%;

	opacity: 1;

	filter: alpha(opacity=100);

	border-radius: 0 0 0 4px;

}

#zoom .previous,

#zoom .next {

	z-index: 99992;

	position: absolute;

	top: 50%;

	overflow: hidden;

	display: block;

	width: 49px;

	height: 49px;

	margin-top: -25px;

}

#zoom .previous {

	left: 0;

	background: url('../img/icons/arrows.png') no-repeat 0 0;

	border-radius: 0 4px 4px 0;

}

#zoom .next {

	right: 0;

	background: url('../img/icons/arrows.png') no-repeat 100% 0;

	border-radius: 4px 0 0 4px;

}

#zoom .close:hover {

	background-color: #da4f49;

}

#zoom .previous:hover,

#zoom .next:hover {

	background-color: #0088cc;

}



</style>

 

 

 

<!--图片弹出层样式 必要样式-->


 

 

</head>

JQery图片弹出兼容有关问题

相关推荐