问：为什么向上间融滚动会出现错位？

admin

我们在开发yl模板时发现一个奇怪的现象：
DIV代码：
$func_article(navi=Navigator,css=Marquee,para=Construction,len=12,rows=8,list=2,more=more.gif)$
$func_marquee(obj=obj,sid=["Marquee"|"ArticleView"],dir=0,tween=0.1,width=731,height=336,timer=0,delay=4,wait=4,step=168)$

CSS代码：
#ArticleView{ display:block;}
#ArticleView *{ line-height:1.8em;}
#ArticleView ul{ margin:0; padding:0;}
#ArticleView ul li{ float:left; display:block; width:171px; margin:4px 5px; text-align:center;}
#ArticleView .thumbs a{ clear:both; display:block; border:1px solid #dfdfdf; padding:2px;}
#ArticleView .thumbs a:hover{ clear:both; display:block; border:1px solid #888888; padding:2px;}
#ArticleView .thumbs img{ border:0; width:165px; height:132px; clear:both;}
#ArticleView .atext{ border:0; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#ArticleView .atext:hover{ border:0; background:#efefef;}

问题：第一遍滚动时没有发现问题，当滚动重复第二遍时，发现总向上多偏移了4PX
研究：4PX，一定是margin:4px 5px造成，于是改成：margin:0 5px;
结果：成功验证margin造成了问题的发生，由于上下少了各4px共8px，为了弥补美观调整了#ArticleView .atext，增加了height:30px;

改好的完整代码，可以直接复制引用：
#ArticleView{ display:block;}
#ArticleView *{ line-height:1.8em;}
#ArticleView ul{ margin:0; padding:0;}
#ArticleView ul li{ float:left; display:block; width:171px; margin:0px 5px; text-align:center;}
#ArticleView .thumbs a{ clear:both; display:block; border:1px solid #dfdfdf; padding:2px;}
#ArticleView .thumbs a:hover{ clear:both; display:block; border:1px solid #888888; padding:2px;}
#ArticleView .thumbs img{ border:0; width:165px; height:132px; clear:both;}
#ArticleView .atext{ border:0; display:block; height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#ArticleView .atext:hover{ border:0; background:#efefef;}

如果您有更好的解决办法，请下面发贴，我们对您的分享精神表示感谢，同时我们也会为您未来的开发设计做好更大的支持。