欢迎光临当易网!
您的位置:下载首页故障/设置 → 用li标记拼接的图片之间有缝隙解决

用li标记拼接的图片之间有缝隙解决

出处:本站原创 作者:tt 日期:2014-3-12 人气:     

用li标记拼接的图片之间有缝隙解决(CSS)

    最近在帮用户设计的网站的时候,遇到一个问题:将一个大图切成切片后用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>

    经过一番研究与学习,这个问题终于得到了解决。具体如下,创建一个针对图片切片的样式,代码如下:

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

   然后将这个样式应用到每个切片上就会正常。代码及效果如下:

<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>

 

 

相关文章
相关软件
关于本站 | 广告业务 | 版权声明 | 软件合作 | 友情链接 | 联系我们 | 返回顶部
当易网 版权所有 Copyright© 2006-2012 Www.downyi.com, All Rights Reserved.