注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

<li>、<img>标签之间在IE6有空隙的解决方法  

2014-08-10 18:05:04|  分类: CSS兼容专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

img标签、li标签之间在IE6有空隙的解决方法

先来了解下:图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离,还有不理解baseline,那么来看看具体是什么?下图详细的描述了vertical-align对其方式:
li、img标签之间在IE6有空隙的解决方法 - 梦幻雪冰 - 梦幻雪冰
 所以img标签和li标签之间就产生了间距。
测试代码如下:
结构代码:
<div class="wrap">
     <ul>
          <li><a href="" title="梦幻雪冰"><img src="menghuanxuebing.jpg" alt="梦幻雪冰" title="梦幻雪冰"></a></li>
          <li><a href="" title="梦幻雪冰"><img src="menghuanxuebing.jpg" alt="梦幻雪冰" title="梦幻雪冰"></a></li>
          <li><a href="" title="梦幻雪冰"><img src="menghuanxuebing.jpg" alt="梦幻雪冰" title="梦幻雪冰"></a></li>
          <li><a href="" title="梦幻雪冰"><img src="menghuanxuebing.jpg" alt="梦幻雪冰" title="梦幻雪冰"></a></li>
          <li><a href="" title="梦幻雪冰"><img src="menghuanxuebing.jpg" alt="梦幻雪冰" title="梦幻雪冰"></a></li>
     </ul>
</div>
样式代码:
<style>
     .wrap li{
          width: 300px;
          height: 220px;
          background: #fcf;
          /*如果没有设置font-size:0,img和li之间底部多出空白*/
          font-size: 0;
     }
</style>
测试结果:
li、img标签之间在IE6有空隙的解决方法 - 梦幻雪冰 - 梦幻雪冰
那么如何解决呢?
1、li标签设置浮动

.wrap li{
/*设置浮动*/
float: left;
width: 300px;
height: 220px;
background: #fcf;
/*如果没有设置font-size:0,img和li之间底部多出空白*/
font-size: 0;
}

2、用hack技术来处理(不推荐使用)

.wrap li{
width: 300px;
height: 220px;
/*IE6 hack技术处理*/
_margin-bottom: -3px;
background: #fcf;
/*如果没有设置font-size:0,img和li之间底部多出空白*/
font-size: 0;
}

3、li标签里设置vertical-align

.wrap li{
width: 300px;
height: 220px;
background: #fcf;
/*如果没有设置font-size:0,img和li之间底部多出空白*/
font-size: 0;
/*设置top、bottom、middle,都可以解决*/
vertical-align: top;
}

欢迎学习交流-----梦幻雪冰
 
  评论这张
 
阅读(118)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017