网页长屏大背景淡入淡出效果在IE7、IE8下产生1px偏差

最新推荐文章于 2021-06-08 16:51:20 发布

弦月梦影

最新推荐文章于 2021-06-08 16:51:20 发布

阅读量1.1k

点赞数 1

分类专栏：兼容性问题文章标签： ie 8 ie 7 兼容性

本文链接：https://blog.csdn.net/sinat_29678493/article/details/50446250

版权

兼容性问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我用的是两张宽为1920px,高为2140px的图，用绝对定位让它们重叠，实现淡入淡出切换效果。第一次写的代码，在IE7和IE8下出现异常，背景图会向右偏离1px,然后再回到原位。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	html,body{
		height: 100%;
		width: 100%;
		position: relative;
	}
	.main{
		width: 100%;
		height: 2140px;
		position: relative;
	}
	.bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2140px;
	}
	.bg1{
		background: url(images/bg1.jpg) center no-repeat;

	}
	.bg2{
		background: url(images/bg2.jpg) center no-repeat;

	}
</style>
</head>
<body>
<div class="main">
    <div class="bg1 bg"></div>
    <div class="bg2 bg"></div>
</div> 
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    	var index=0;
    	function autopaly(){
    		setInterval(function(){
    			index++;
    			if(index>1){
    				index=0;
    			}
    			$('.bg').eq(index).fadeOut(800).siblings('.bg').fadeIn(800);
    			// $('.bg').eq(index).hide().siblings('.bg').show();
    			// $('.bg').eq(index).fadeTo(800,0).siblings('.bg').fadeTo(800,1);
    			// $('.bg').eq(index).animate({"opacity":0},800).siblings('.bg').animate({"opacity":1},800);
    		},3000)
    	} 
    	autopaly();
    </script>
</body>
</html>

后来做了以下尝试，1、在html上加上overflow,这样倒是正常了，但是这样滚动条就消失了，只有一屏，无法显示背景所有。2、background属性去掉center top,这样一来也没出现1px偏差，但显然不可以去掉center的，背景需要居中。3、我开始怀疑是js的问题了，于是把$('.bg').eq(index).fadeOut(800).siblings('.bg').fadeIn(800)换成$('.bg').eq(index).fadeTo(800,0).siblings('.bg').fadeTo(800,1);或者$('.bg').eq(index).animate({"opacity":0},800).siblings('.bg').animate({"opacity":1},800);但结果都不理想，于是再换成$('.bg').eq(index).hide().siblings('.bg').show();咦，居然正常了，可是我要的是淡入淡出效果啊！我在猜测也许是show，hide切换的太快，所以没看出异常来，而给它一定的时间淡入淡出过度，bug才看得清楚些。于是基本排除了是JS的问题了，那只能是布局上的问题了。对代码做了如下改动之后，问题终于解决了。

.main{max-width: 1920px;height: 2140px;position: relative;overflow: hidden;}
.bg{position: absolute;top: 0;left: 50%;width: 1920px;margin-left: -960px;height: 2140px;overflow: hidden;}

背景宽使用原来图片的宽度1920px，不写成100%，并且采用绝对定位居中的方法让它居中，它的父级元素的样式也做了改动，宽设为max-width：1920px,再加上overflow:hidden。经过不断尝试，总算把问题解决了，虽然还不知道是什么原理 ╮(╯_╰)╭。路过的大神也可以指点一下。。。