css 图片底部空隙问题的解决方法

时间：2022-06-25 10:15:18 编辑：袖梨来源：一聚教程网

一、开篇

很久很久以前，我数过IE6的七大罪状（七个蛋疼的bug），原文IE6 Bug大盘点，看看你都遇到过哪些【更新中】，虽然IE6用户量在不断下降，但我们目前仍需要为那些执迷不悟者考虑，谁让用户是老大呢。好了，今天我就来列出IE6的第八大罪状：图片底部空隙问题，欲了解出解决方案，请往下看吧。

二、症状表现

昨天在改版网站首页时，准备将推荐博客那栏用博主头像显示，并在图片周围加了1px的边框，css教程代码如下：


	  
		 代码如下
		复制代码
	  
	  
		#blog_list span.blog_img { display: inline-block;  padding:1px;border:#ddd solid 1px;  margin-bottom:2px  }
#blog_list img{ width:78px; height:78px;}

	  
	
本来觉得这个css肯定没问题的，但细心的我还是用IE6测试了一下，果断，令我悲催了，IE6下图片下方有点空隙出现，我没给图片加margin和padding啊，哪里来的空隙呢？真是纠结。

正常效果 IE6下底部多了空隙

三、解决方案

没办法，寻找解决方案喽，其实也挺简单，有如下几种方案大家可以参考：

1、将img的display设置为block

2、讲img的父元素的font-size设置为0

3、设置img的vertical-align属性值为vertical-align:top | bottom |middle |text-bottom

四、总结

1、IE6早点去死吧！

2、还在用IE6的人赶紧改邪归正，不要再执迷不悟了，web designer 伤不起的啊！

3、兵来将挡，水来土掩，当我们遇到问题的时候要冷静，要淡定，多分析，少抱怨！

推荐专题

最新下载

热门教程

css 图片底部空隙问题的解决方法

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程

代码如下	复制代码
#blog_list span.blog_img { display: inline-block; padding:1px;border:#ddd solid 1px; margin-bottom:2px } #blog_list img{ width:78px; height:78px;}