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

 

<marquee direction="up" scrollamount="3" height="100px" onmouseout="this.start()" onmouseover="this.stop()">
    <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()" onmouseover="this.stop()">
<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>

 

 

评论

2 楼 Jackroyal 2012-03-17  

谢啦 正在为这个问题纠结在 非常感谢

1 楼 KerryWang 2011-04-21  

补充一下：
1. 经过测试，当marquee里面是li标签时，在IE8中会出现滚动问题。
如果是P标签或纯文字（用br分行），则不会出现问题。
因此是marquee和li标签公用的问题。
解决方案不变，依然使用div包装li。
2. 测试发现，span标签包装li的话，不会解决该问题。