用li標記拼接的圖片之間有縫隙解決(CSS)

    最近在幫用戶設(shè)計的網(wǎng)站的時候，遇到一個問題：將一個大圖切成切片后用LI標記拼接到一起，在IE8下顯示正常，在IE8兼容視圖或者IE6下顯示圖片之間有縫隙。代碼和截圖如下：

<ul>
             <li class="a1"><img src="images/f2_01.gif" /></li>
                <li class="a2"><img src="images/f2_02.gif"  /></li>
                <li class="a3"><img src="images/f2_03.gif"  /></li>
                <li class="a4"><img src="images/f2_04.gif" /></li>
                <li class="a5"><img src="images/f2_05.gif" /></li>
    
               
   </ul>

    經(jīng)過一番研究與學習，這個問題終于得到了解決。具體如下，創(chuàng)建一個針對圖片切片的樣式，代碼如下：

<style>
.jin{
vertical-align:bottom;
display:block;
}
</style>

   然后將這個樣式應(yīng)用到每個切片上就會正常。代碼及效果如下：

<ul>
             <li class="a1"><img src="images/f2_01.gif" class="jin" /></li>
                <li class="a2"><img src="images/f2_02.gif" class="jin" /></li>
                <li class="a3"><img src="images/f2_03.gif"  class="jin" /></li>
                <li class="a4"><img src="images/f2_04.gif" class="jin" /></li>
                <li class="a5"><img src="images/f2_05.gif" class="jin" /></li>
    
               
   </ul>