解决IE7下页面元素因浏览器渲染(重绘)Bug而不显示的问题

稍微有点经验的前端应该知道IE7-有一个经典的渲染问题,表现在对display为inline-block的元素的不友好上。我们也知道只要重新给这个元素单独宣布一条display:inline,就能解决问题。但今天我要说的不是这个,最近新完成的一个网站,在IE7下浏览,就有包括导航和热图这样的大块元素没有正常显示:
iexuanran

经过检查,发现这些没有正常显示的元素,都有一个共同的CSS属性- position:relative,导致这些元素在IE7中没有被正常的渲染到,就没有显示出来。百度了一下,这个问题归类为-IE重绘问题。当然并非所有position为relative的元素都不能在IE7中正常显示,实际情况要比我这里所指的复杂的多。由于布局的硬性需要(比如滚动图片的移动效果),使我没有办法不用relative属性,所以要解决在IE7中的渲染问题,就必须另外想办法。

回到开头提到的inline-block的问题,一般的解决办法是这样的:

1
2
#item { display: inline-block; }
#item { *display: inline; }

也有人用这种解决办法:

1
2
3
4
5
#item { 
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

在一条CSS里面即可解决问题,不过要多加一条zoom的属性,通过zoom来重新渲染一下元素,然后再用display:inline把元素的行内布局触发出来。

第二种解决方法提供了一个思路:用zoom:1来通知浏览器重新渲染元素

那么这种方法对position:relative的布局问题有效吗?经测试是有效的!同样在IE7中没有显示出来的导航和滚动热图,我用IE11的F12工具在IE7的模式下调试,加一个zoom:1,对应的元素就立即显示出来了。但我把zoom:1直接加到CSS中,并没有达到重新渲染的目的,这两块内容仍然没有显示出来。尝试在CSS文件的底部加入这样一条:

1
body { *zoom: 1; }

也没有解决问题

因为CSS在页面的head中就已经加载完毕了,把zoom写在CSS中,并没有达到重新渲染已经显示不出的元素的问题。所以,解决重新渲染bug的关键在于,要在页面完全加载完毕后,再进行一次渲染。
于是我使出了“终极大招”:

1
2
3
4
5
6
7
8
9
<script>
if(SysIe<=7) {//判断浏览器版本,只在IE7和以下版本浏览器中执行下面的脚本
	addDOMLoadEvent(function(){
			setTimeout(function(){
			document.getElementsByTagName("body")[0].style.zoom=1;
		},1000);
	});
}
</script>

在IE7-中用JS让整个body在页面加载一秒钟后重新渲染一次,于是问题就解决了。其实这里的zoom=1换成display=block或者其他CSS,也能达到目的。这里省略了判断浏览器和DOM加载完毕侦听器的代码,只贴出了一个用JS解决问题的思路,希望对你能有帮助。

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/906.html。百度不可信,搜索请谨慎。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以获取本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表评论

电子邮件地址不会被公开。 必填项已用*标注