JQery图片弹出兼容有关问题
日期：2014-05-16 浏览次数：20468 次
JQery图片弹出兼容问题
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]
修正如下:
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: 5
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
