原因 根据【css权威指南（中文第三版）】
因为是基线对齐（vertical-align: baseline，要求一个元素的基线与其父元素的基线对齐）的规则，这个对齐规则使得一些Web浏览器总把替换元素的底边放在基线上，即使该行中没有其他文本。例如一个表单元格中只有一个图像。这个图像可能实际在基线上，不过在某些浏览器中，基线下面的空间会导致图像下出现一段空白。另外一些浏览器则会把图像“紧包”在表单元格中，所以不会出现空白。根据CSS工作组的意见，这种空白的行为是正确的，不过大多数创作人员都不喜欢这种做法。
解决方案
1. 给<img>标签设置为：display:block。
img{ display: block;}
2. 定义容器里的字体大小为0。
div{ font-size: 0; }
3. 定义图片img标签vertical-align:top,vertical-align:bottom,vertical-align:middle。
img{ vertical-align: top || bottom || middle; }
还有其他方法的，不过个人觉得这三个方法就足以解决了。
