marquee标签在IE8下滚动不连贯解决方案

KerryWang

 
<marquee direction="up" scrollamount="3" height="100px" onmouseout="this.start()" >    <li>滚动行1</li>    <li>滚动行2</li>    <li>滚动行3</li>    <li>滚动行4</li>    <li>滚动行5</li></marquee> 上述代码在Chrome，FireFox，IE6和IE9下均测试正常，唯独IE8下显示不正常（滚动不连贯）。
解决方案1

在网页head标签中加入如下代码
 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 这样，文字滚动正常。但是，文字样式会受到影响（即按照IE7的模式显示）。
推荐使用解决方案2
解决方案2

文章开头的代码，滚动显示的文字是封装到li标签中的，但多个平行的li标签并无封装，即marquee标签内直接包含了多个li标签，个人认为这是IE8滚动不连贯的根源。
为了使IE8正常支持marquee，滚动文字不可以直接写在marquee标签内，而应该首先包装到<div>中，再在外层加marquee标签，即可正常滚动。
示例代码如下：
<marquee direction="up" scrollamount="3" height="100px" onmouseout="this.start()" ><div><!-- 滚动文字的外层需要有div封装-->    <li>滚动行1</li>    <li>滚动行2</li>    <li>滚动行3</li>    <li>滚动行4</li>    <li>滚动行5</li></div></marquee> 附：

marquee属性说明（From：http://blogold.chinaunix.net/u/29770/showart_233689.html）

 
<marquee> ... </marquee> 
移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等
鼠标属性
onMouseOut=this.start() ........鼠标移出状态滚动 
onMouseOver=this.stop() .........鼠标经过时停止滚动 

例如：
 
<marquee direction=up scrollamount=2 height=130 onmouseover=this.stop() onmouseout=this.start()> 
 
方向 
<direction=#> #=left, right ,up ,down 
 
 
<marquee direction=left>从右向左移！</marquee>  
 

方式 
<bihavior=#> #=scroll, slide, alternate
 
<marquee behavior=scroll>一圈一圈绕着走！</marquee> <marquee behavior=slide>只走一次就歇了！</marquee> <marquee behavior=alternate>来回走</marquee>  

循环 
<loop=#> #=次数；若未指定则循环不止(infinite) 

<marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee><marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee> <marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee>  
速度 
<scrollamount=#>

<marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>  

延时 
<scrolldelay=#>
<marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>  

外观(Layout)设置 

对齐方式(Align) 
<align=#> #=top, middle, bottom 

<font size=6> <marquee align=# width=400>啦啦啦，我会移动耶！</marquee> </font>  

底色 
<bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩： 
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, 
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 

<marquee bgcolor=aaaaee>颜色！</marquee>  

面积 
<height=# width=#> 

<marquee height=40 width=50% bgcolor=aaeeaa>面积！</marquee>  

空白 
(Margins)<hspace=# vspace=#> 
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积！</marquee>