1.问题的引出：
产品列表页面场景：
上面是产品图片【img】，
中间是提示库存信息【span】（始终存在，有库存则不显示文字，但元素占位。所以设置display:inline-block），
下面是产品名称【div】。
效果如下：
我们发现，没有文字的时候，span元素下方会多一条空白。
将display设置为block，则不会出现此问题。
2.问题的解决：
span元素设置vertical-align值为baseline以外的值。
3.为什么这样解决：
兼容性问题！！！
专业描述：RD3020: 在不同的文档模式中，当唯一的非表单控件类行内替换元素存在于其包容块中时，其父框的行高并不一定会计算文本基线高度
见地址：http://w3help.org/zh-cn/causes/RD3020
span设为inline-block之后，未包含文字时下面会多出一条空白问题
原文：http://www.cnblogs.com/talentzemin/p/5164600.html