HTML5如火如荼，几个月前的项目要部分应用新技术，尤其是简单的文档类型声明<!DOCTYPE html>（不区分大小写），非常吸引人。中途因为IE8等在第一次打开网页时会阻止js执行，停在询问页面，导致新的标记无法识别使页面十分混乱而作罢，但doctype的简约定义仍在使用。可是在后续做到上图下文的格式时，发现图片下方会出现莫名空白区域，经验上是没问题的，于是翻来覆去的比对，发现唯一不同只在doctype的定义了，替换成旧版的过渡模式确实就变好了，后来发现设置图片容器的line-height为0也可以，一直对付着用，今天又翻出这个问题，仔细研究下，发现是图片垂直方向对齐方式和line-height共同作用的结果。
测试代码如下：
<style type="text/css">
img,div,span{border:none;padding:0;margin:0;}
.example_box{line-height:75px;width:500px;border:10px solid #f60;}
.example_box div{}
.example_box span{font-size:16px;}
</style>
<div class="example_box">
<img src="photo/image5.jpg" alt=""/>
<div>
<span>标记文字(line-height:75px;)</span>
</div>
</div>
默认表现（Firefox下）：
图1
可以很明显的看出来<img/>和<div/>之间有个明显的间距，大小接近<div/>行高的一半。
如果将包含文字的<div/>修改显示类型为 display:inline-block; ，那么表现如图2：
图2
可以看出图片和文字的对齐方式是图1中图片与文字区域间距的来源。
而间距的大小，则由line-height的值决定，但里面的比例并不是很清楚，大概在不到一半的水平上。这里不再贴图展示，主要讨论图片的垂直对齐方式对问题产生的影响。
图片的vertical-align属性值默认为baseline，测试其他几个属性，分别如下图：
图3（vertical-align:top;）
图4（vertical-align:text-top;）
图5（vertical-align:text-bottom;）
图6（vertical-align:bottom;）
图7（vertical-align:middle;）
就vertical-align的几个值来看，
图8 第三行明显文字被表情影响了行距（chrome下新浪微博）
综上所述，图片下的莫名占位空白问题是vertical-align属性和line-height值共同决定的，前者是导致问题的原因，后者基本决定空白的大小。
该可以有三种解决办法：
我只是发现了这个现象，并总结了可能的影响因素，至于为什么在html5模式下表现为这样还不得而知，希望哪位知道的能不辞吝教，欢迎大家指正。
相关文章
精彩导读
热门资讯
关注我们
