跨浏览器有关问题 _JavaScript

跨浏览器问题
<%@page import="com.pictureroll.entity.WordBean"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文字滚动最终版</title>
<style type="text/css">
a:link {color: blue; text-decoration:none;}
a:visited {color:blue;text-decoration:none;}
a:hover {color: red; text-decoration:underline;}
</style>
</head>
<body>
<div id="scroll_begin">
<ul >
<% ArrayList list = (ArrayList)session.getAttribute("word");
for(int i = 0;i<list.size();i++){
WordBean wb =(WordBean) list.get(i);
%>
<li ><a href=<%=wb.getWord_url() %> target="_blank"><%=wb.getWord()%></a></li>
<br>
<%} %>
</ul>
</div>
<script language="JavaScript">

scroll_beginHeight=200;
stopscroll=false;

with(scroll_begin){
style.width=300;
style.height=120;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0;

function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<scroll_beginHeight){
templayer.innerHTML+=scroll_begin.innerHTML;
}
scroll_begin.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",100);
}
document.body.onload=init;

function scrollUp(){
if(stopscroll==true) return;
preTop=scroll_begin.scrollTop;
scroll_begin.scrollTop+=1;
if(preTop==scroll_begin.scrollTop){
scroll_begin.scrollTop=templayer.offsetHeight-scroll_beginHeight;
scroll_begin.scrollTop+=1;
}
}
</script>

</body>
</html>

上面的代码的文字滚动只能支持IE，不能支持火狐，求大神帮忙解决。。。

------解决方案--------------------
加上单位px试试
------解决方案--------------------
js所有和位置相关的属性最好都加上单位

------解决方案--------------------

HTML code


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>        
        <style>
            ul {
                margin:100px;
                height:72px; border:1px solid red;
                overflow:hidden;
            }
            li {
                height:24px; line-height:24px; font-size:12px;
            }
        </style>        
    </head>
    <body>
        <ul id="a">
            <li>1-1</li>
            <li>1-2</li>
            <li>1-3</li>
            <li>1-4</li>
        </ul>
        <script>
            //document.getElementById()的最简化应用
            function $(element){
                if(arguments.length>1){
                    for(var i=0,length=arguments.length,elements=[];i<length;i++){
                        elements.push($(arguments[i]));
                    }
                    return elements;
                }
                if(typeof element=="string"){
                    return document.getElementById(element);
                }else{
                    return element;
                }
            }
            //类创建函数
            var Class={
                create:function(){
                    return function(){
                        this.initialize.apply(this,arguments);
                    }
                }
            }
            //对象属性方法扩展
            Function.prototype.bind=function(object){
                var method=this;
                return function(){
                    method.apply(object,arguments);
                }
            }
            var Scroll=Class.create();
            Scroll.prototype={
                //第一个参数定义要滚动的区域,第二个参数定义每次滚动的高度
                initialize:function(element,height,delay){
                    this.element=$(element);
                    this.element.innerHTML+=this.element.innerHTML;
                    this.height=height;
                    this.delay=delay*1000;
                    this.maxHeight=this.element.scrollHeight/2;
                    this.counter=0;
                    this.scroll();
                    this.timer="";
                    this.element.onmouseover=this.stop.bind(this);
                    this.element.onmouseout=function(){this.timer=setTimeout(this.scroll.bind(this),1000);}.bind(this);
                },
                scroll:function(){
                    if(this.element.scrollTop<this.maxHeight){
                        this.element.scrollTop++;
                        this.counter++;
                    }else{
                        this.element.scrollTop=0;
                        this.counter=0;
                    }
                    
                    if(this.counter<this.height){
                        this.timer=setTimeout(this.scroll.bind(this),5);
                    }else{
                        this.counter=0;
                        this.timer=setTimeout(this.scroll.bind(this),this.delay);
                    }
                },
                stop:function(){
                    clearTimeout(this.timer);
                }
            }
            new Scroll('a', 24, .2)
        </script>
    </body>
</html>