两行图片循环向左滚动

Question

    <div class="mo_product" id="mo_product">

    <div id="demoproduct">

      <div id="inproduct">

        <div id="product" >

          <ul>

            <li><a href="#"><img src="images/mr_case_01.jpg" border="0" /></a></li>

            <li><a href="#"><img src="images/mr_case_02.jpg" border="0" /></a></li>

            <li><a href="#"><img src="images/mr_case_02.jpg" border="0" /></a></li>

            <li><a href="#"><img src="images/mr_case_03.jpg" border="0" /></a></li>

            <li><a href="#"><img src="images/mr_case_05.jpg" border="0" /></a></li>

        </ul>

    </div>
    <div id="product2"></div>

</div>

</div>

    <div id="demoproduct2">

      <div id="inproduct2">

        <div id="product12" >

          <ul>

            <li><a href="#"><img src="images/mr_case_01.jpg" border="0" /></a></li>

            <li><a href="#"><img src="images/mr_case_02.jpg" border="0" /></a></li>

            <li><a href="#"><img src="images/mr_case_02.jpg" border="0" /></a></li>

            <li><a href="#"><img src="images/mr_case_03.jpg" border="0" /></a></li>

            <li><a href="#"><img src="images/mr_case_05.jpg" border="0" /></a></li>

          </ul>

        </div>

    <div id="product22"></div>

</div>

</div>

</div>

.mo_product{ width:1224px; padding:0 20px;}

#demoproduct,#demoproduct2 {margin: 0 auto; width: 1224px; overflow: hidden;}

#inproduct ,#inproduct2 { float: left; width: 800%; height:147px;}

#inproduct li ,#inproduct2 li{ float: left; text-align: center; list-style: none; margin-left:30px;}

#inproduct li a ,#inproduct2 li a{ display: block; width:202px; height: 123px;}

#inproduct li a img,#inproduct2 li a img{ border:#b5b5b5 solid 3px; margin-top:18px;}

#product ,#product12{ float: left;} 

#product2 ,#product22 { float: left;}

window.onload = function(){
var speed=40;
var tabas = document.getElementById("mo_product");
var tab=document.getElementById("demoproduct");
var tab1=document.getElementById("product");
var tab2=document.getElementById("product2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}

var speed2=40;
var tab2=document.getElementById("demoproduct2");
var tab12=document.getElementById("product12");
var tab22=document.getElementById("product22");
tab22.innerHTML=tab12.innerHTML;
function Marquee2(){
if(tab22.offsetWidth-tab2.scrollLeft<=0)
tab2.scrollLeft-=tab12.offsetWidth
else{
tab2.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,40);
var MyMar2=setInterval(Marquee2,40);
tabas.onmouseover=function() {
  clearInterval(MyMar2);
 clearInterval(MyMar);
 };
tabas.onmouseout=function() {
 MyMar2=setInterval(Marquee2,40);
 MyMar=setInterval(Marquee,40);
 };
}

我现在做了两个滚动，在谷歌和火狐浏览器刷新能够上下对齐，但是在IE图片对不齐，一刷新下面图片就向右跳。

不知道要怎么修改。如果只是一个滚动要怎么做成两行一起滚动？