图片间隙与滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
#ss{ ;width:130px;height:88px;margin:0 auto;overflow: hidden;white-space: nowrap;background:#ffffff; border:1px solid #000000}
#ss ul{margin:0px; padding:0px;}
#ss ul li{ margin:0px; padding:0px; list-style:none; display:inline; }
</style>
<body>
<div id='ss'>
<ul>
<li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
<li><img src="http://img1.qq.com/news/pics/17515/17515126.jpg"/></li>
<li><img src="http://img1.qq.com/news/pics/17515/17515135.jpg"/></li>
<li><img src="http://img1.qq.com/news/pics/17515/17515141.jpg"/></li>
<li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
</ul>
</div>
<script>
var div = document.getElementById('ss');
setInterval(function(){div.scrollLeft++},10);
</script>
这个是可以正常运行的
但是我图片之间都有一条缝隙  然后了 在#ss ul li{ margin:0px; padding:0px; list-style:none; display:inline; }
加上float  然后问题就出来了
无法滚动了,
该如何解决了 
各位大虾，指教下吧 !~

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
    <style type="text/css">
    #ss{ ;width:230px;height:88px;margin:0 auto;overflow: hidden;white-space: nowrap;background:#ffffff; border:1px solid #000000}
    </style>
    <div id='ss'>
      <table cellpadding="0" cellspacing="0">
        <tr>
          <td><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></td>
          <td><img src="http://img1.qq.com/news/pics/17515/17515126.jpg"/></td>
          <td><img src="http://img1.qq.com/news/pics/17515/17515135.jpg"/></td>
          <td><img src="http://img1.qq.com/news/pics/17515/17515141.jpg"/></td>
          <td><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></td>
        </tr>
      </table>
    </div>
    <script>
    var div = document.getElementById('ss');
    setInterval(function(){div.scrollLeft++},10);
    </script>
    </body>
    </html>
    这个时候用table吧
    该用就用
      

  2.   

    IE bug 加上font-size:0;即可
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <style type="text/css">
    #ss{width:130px;height:88px;margin:0 auto;overflow: hidden;white-space: nowrap;background:#ffffff; border:1px solid #000000;}
    #ss ul{margin:0px; padding:0px;}
    #ss ul li{ margin:0px; padding:0px; list-style:none; display:inline;font-size:0;}
    </style>
    <body>
    <div id='ss'>
    <ul>
    <li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515126.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515135.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515141.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
    </ul>
    </div>
    <script>
    var div = document.getElementById('ss');
    setInterval(function(){div.scrollLeft++},10);
    </script>
      

  3.   

    呵呵，确实。再稍稍改了下，这次支持了。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <style type="text/css">
    #ss{width:130px;height:88px;margin:0 auto;overflow: hidden;white-space: nowrap;background:#ffffff; border:1px solid #000000}
    #ss ul{margin:0px; padding:0px;width:650px;}
    #ss ul li{margin:0px; padding:0px; list-style:none; float:left;display:block;}
    </style>
    <body>
    <div id='ss'>
    <ul>
    <li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515126.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515135.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17515/17515141.jpg"/></li>
    <li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/></li>
    </ul>
    </div>
    <script>
    var div = document.getElementById('ss');
    setInterval(function(){div.scrollLeft++},10);
    </script>