稍微有点经验的前端应该知道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。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。