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

经过检查，发现这些没有正常显示的元素，都有一个共同的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，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。