习之 的个人主页 注册

【原创】IE6和IE8浏览器兼容的移动代码(草稿)

导语:

修改
字体调整: | |

发表于2012年08月16号 10点 阅读 10303 评论50 点赞3 ©著作权归作者所有

IE6和IE8浏览器兼容的移动代码

源代码里的marquee标签能使图片或文字做左右、上下移动,在此基础上添加边框、背景、动画,并对图像做羽化、翻转处理等等,还能幻化出各种各样的画面效果,深受大家的欢迎。然而令人困扰的是在IE8浏览器(Internet Explorer 8)看到的效果与在IE6(或IE7) 看到的效果是不一样的,这就是IE8与IE6不兼容的一个例证。

为说明清楚,习之用四张奥运冠军照片(叶诗文、孙杨、吴敏霞、林丹)做一个四图向左移动的实例,用的代码是最常见的marguee移动代码,代码结构是:

又用两个Flash做了在IE6和IE8浏览效果的模拟图。

同样的这段代码,在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移动代码。

IE8、IE6兼容的左移图
 

上面左移图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浏览器的朋友逢到页面效果有“异常”时,不妨先用“兼容性视图”看一看,也许就是因为两个浏览器不兼容所造成的。

(注:您的设备不支持flash)

声明:以上内容仅用户个人行为,不代表本站(老小孩社区)观点,如有侵权或其他行为用户自己承担相关责任与本站无关。【举报文章】
点赞3 收藏 35 推送到圈子 分享
微信扫二维码分享

等3人点赞

本文作者

加好友
评论字体大小调节: | |

精选留言

您需要登录后才能回复

登录立即注册

请选择你想添加的收藏夹

新建收藏夹

收藏夹名称

©2017 老小孩网站版权所有 | 沪ICP备08012383号    举报电话:021-64323922
×
×