問題原因在於：

瀏覽器並沒有所謂的”HTML 5 模式”，而是
只有三種：怪異模式(Quirks)，幾乎標準的模式(Limited Quirks)和標準模式(Standards)，其中幾乎標準的模式和標準模式之間的唯一差異在於是否對元素給定行高(line-height)和基線(baseline)。幾乎標準模式中，如果標籤所在行沒有其他的行內元素，將不指定基線(baseline)，標籤因此會緊貼著父元素底部。在標準模式中，行框總是會包含類似字母”g”，”f”尾巴下伸出來的那一部分空間(針對下行字母)，即使行框內並沒有任何內容。因此這種情況下你看到的跟父元素底部幾個畫素的間隙實際上就是為”字母尾巴“預留的。

解決的方法：

1、可以設定img的父級div的line-height:0 或者font-size：0；
2、設定img為display：block 或者設定vertical-align：middle；
3、也可以設定img父元素為浮動