IE6和IE8浏览器兼容的移动代码
源代码里的marquee标签能使图片或文字做左右、上下移动,在此基础上添加边框、背景、动画,并对图像做羽化、翻转处理等等,还能幻化出各种各样的画面效果,深受大家的欢迎。然而令人困扰的是在IE8浏览器(Internet Explorer 8)看到的效果与在IE6(或IE7) 看到的效果是不一样的,这就是IE8与IE6不兼容的一个例证。
为说明清楚,习之用四张奥运冠军照片(叶诗文、孙杨、吴敏霞、林丹)做一个四图向左移动的实例,用的代码是最常见的marguee移动代码,代码结构是:
又用两个Flash做了在IE6和IE8浏览效果的模拟图。
同样的这段代码,在IE6上看到的是完整的四张照片在向左移动,而在IE8上只看到叶、孙两张照片。
微软公司推出的Windows操作系统,总是“绑架”一个Internet Explorer,XP系统是IE6;Vista系统是IE7;Win7是IE8。以往微软推出的新浏览器总是向下兼容的,这样虽然兼顾了老用户,但也限制了浏览器的新发展。IE8放弃了向下兼容的原则,但为了顾及老用户,在IE8的“工具”菜单里增加了“兼容性视图”的功能。启用这功能,“专门为旧版本设计的网站通常更美观,而且菜单、图像、文本位置不当等这类问题将被纠正”。marquee的向下不兼容也可以通过启用此功能得到修正。
简单地说,在IE8浏览器里浏览“移动代码”所做的效果,只要打开“工具”菜单,点击“兼容性视图”,就能看到与IE6里同样效果,上面四张冠军照片就能看全了。如果您用的是IE8浏览器,不妨一试。
IE8浏览器也有不同的版本,某些版本在地址栏的一行中有这样一个“兼容性视图”的按钮:
(在刷新按钮的左面)。需要“兼容”时,点击此按钮就可以浏览到IE6的效果。
问题的另一个解决方法是用一套在IE8和IE6里都能兼容的移动代码。
习之做过这样的代码,也提供给网友做过验证。方法很简单,只要将四张照片放置在一个table内,使它们成为一个完整的“移动体”。
下面是四张冠军照的左移图,采用能兼容IE8和IE6的marquee移动代码。
上面左移图marquee部分的源代码:
这套代码在marquee内部加了一组table标签。table里的属性设置,用了常规的五个属性:align、width、cellspacing、cellpadding、border。需要说明的是 :
width 宽度:这里应该填四张照片的总宽度。当图片太多并且宽度不一时,可能计算会出错,原则是数字就小不就大,因为table里的width总是解释成mini-width,设置得小了,会自动撑大。甚至不设置width,代码仍能正常运行。cellspacing :常规设置成0。如要在图片之间留有空隙,那么就设置成空隙的值,或5或10,自定。
关于marquee标签内的属性设置,请参阅习之过去的博客:滚动字幕设置要点。
用marquee做移动代码,可以有上下左右、来回交替、对开移动等等变化,都能做成在IE8和IE6里能兼容的代码,原理就是要将在marquee标签内的图片装在一个“容器”内,使它成为一个完整的移动体,喜欢玩代码的朋友不妨试试看。
IE8和IE6的不兼容之处还有不少,用IE8浏览器的朋友逢到页面效果有“异常”时,不妨先用“兼容性视图”看一看,也许就是因为两个浏览器不兼容所造成的。