问题原因在于：
浏览器并没有所谓的”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父元素为浮动