CSS之vertical-align属性测试

关于vertical-align:的几个属性的情况一直处于模棱两可的状态，今天特来研究下，这个几个属性，并对几个属性在不同浏览器中的表现进行测试
vertical-align的常用属性有baseline,top,bottom,text-top,text-bottom,middle
下面看看测试用例：
第一种情况，默认行高的情况下：
1)demo01：
vertical-align:baseline在各浏览器中的表现情况基本一致，如下图：

2)demo02:
vertical-align:bottom在个浏览器中的表现却差强人意，如下图：
IE6/7中：

IE8/9/FF/Chrome中：

3)demo03:
vertical-align:top；在各浏览器中的表现情况基本一致，如下图：

4)demo04:
vertical-align:middle；在各浏览器中的表现情况基本一致，如下图：

5)demo05:
vertical-align:text-top；在各浏览器中的表现情况基本一致，如下图：

 

6)demo06:
vertical-align:text-bottom；在各浏览器中的表现情况基本一致，如下图：

第二种情况，设置文字行高
7)demo07:
vertical-align:text-bottom;
IE6/7下：

IE8/9/FF/Chrome下：

8)demo08:
vertical-align:text-top;
IE6/7下：

IE8/9/FF/Chrome下：

9)demo09:
vertical-align:text-middle;

10)demo10:
vertical-align:top;
IE6/7下：

IE8/9/FF/Chrome下：

11)demo11:
vertical-align:bottom;
IE6/7下：

IE8/9/FF/Chrome下：

12)demo12:
vertical-align:baseline:

IE6/7下：

IE8/9/FF/Chrome下：

总结：
无行高时：除bottom外，各浏览器表现基本一致
设置行高后，除middle外，各属性在浏览器中表现差异很大，由于浏览器对内联文本和内联图片的结构的解释不似相同，
所以对不同浏览器下的呈现仍会有影响。

通过此图来更深刻的理解vertical-align各属性的意义。

PS:此图来自蓝色理想