用li標記拼接的圖片之間有縫隙解決
用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>
關(guān)鍵詞:CSS