css 圖片底部空隙問題的解決方案

一、開篇

很久很久以前，我數過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、兵來將擋，水來土掩，當我們遇到問題的時候要冷靜，要淡定，多分析，少抱怨！