日期:2014-05-17  浏览次数:20986 次

<marquee 标签在IE8下出现显示不对
使用 <marquee 标签,想让产品一行从右向左移动,在sogo浏览器下正常。如下图:


但是在IE和googl浏览器下,出现两行同时向左移动,如下图:



我的代码如下:
<div style="width:730px; height:180px; padding:0 10px;">
    <marquee onmouseover=stop() onmouseout=start() scrollAmount=3 direction=left">
        <c:forEach items="${recommendProductList}" var="productInfo" varStatus="step">
<div style="height:170px; width:170px; margin-left:10px; margin-top:15px; float:left;">
  <div style="height:120px; width:100%; text-align:center;">
<img src="<%=path%>/${productInfo.imgPath}" style="width:120px; height:120px;"/>
  </div>
  <div style="margin-top:10px; height:30px; text-align:center; overflow:hidden; text-       overflow:ellipsis; white-space:nowrap;">
<a href="#">${productInfo.productName}</a>
   </div>
  </div>
     </c:forEach>
   </marquee>
</div>

其中:<div style="height:170px; width:170px; margin-left:10px; margin-top:15px; float:left;">
每一个产品的div,里面包含一个图片的div 和 图片说明的div
${recommendProductList} 为从后来获取的数据,   ${productInfo.imgPath}为产品图片路径  ${productInfo.productName}为产品名称


这个哪儿写的有问题,请大家帮忙一下
------解决方案--------------------
呵呵……<marquee> 标签有兼容问题的。楼主换js吧。
下面这个js代码很好用,选择其中需要的代码即可。


/*******************************************
    new Marquee({
        obj : 'myMarquee', // 滚动对象 (*必须)
        name : 'MyMQ_1', // 实例名 (可选,默认随机)
        mode : 'x', // 滚动模式 (x=水平, y=垂直) (可选,默认为x)
        interval : 10, // 滚动速度,越小速度越快 (可选,默认10,1秒=1000)
        speed : 1, // 滚动步长,越大数度越快 (可选,默认1像素)
        autoStart : true, // 自动开始 (可选,默认True)
        hovering : true // 是否悬停 (可选,默认True)
    });
********************************************/
var MyMarquees = new Array();
// 生成随机数
function RandStr(n, u){
    var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
    var Len = tmStr.length;
    var Str = "";
    for(i=1;i<n+1;i++){
        Str += tmStr.charAt(Math.random()*Len);
    }
    return (u ? Str.toUpperCase() : Str);
}
// 获取检测实例名
function getMyMQName(mName) {
    var name = mName==undefined ? RandStr(5) : mName;
    var myNames = ','+ MyMarquees.join(',') +',';

   &nb