css vertical-align属性的一些理解与认识(二) text-top篇

一、上集内容简单提要

上集内容“我对CSS vertical-align的一些理解与认识（一）”要追溯到差不多一个月以前了，主要是了解了下vertical-align的一些属性，并简单讲述了自己对vertical-align属性的一些理解。vertical-align是个相当复杂与精深的属性，所理解的一些内容多少会有不准确之处，例如之前我认为inline属性的元素对vertical-align属性是不感冒的，但是在同行的提醒下，我自己一测试，发现完全不是之前自己所想的，就算是很单纯的inline水平的元素都支持vertical-align属性的。所以自己有必要对vertical-align的认识重新梳理，整理成文。本集内容主要讲讲我对在一般情况下vertical-align其作用的理解，以及vertical-align相关的对齐问题，以及浮动为何可以破坏vertical-align属性。

二、我对不同浏览器解析vertical-align属性的理解

在上集中，在最后提供的实例中，vertical-align:middle实际上应该是与后面的文字是独立的，毫无关联，就是说vertical-align无论是什么，都不影响文字在box中的位置（IE6/7对vertical-align理解与现代浏览器有差异）。但是在实际情况下，行高可能会小于inline-block或是类似于inline-block属性的元素的content area的高度，此时vertical-align对文字的影响似乎是显而易见的，那么这种影响是如果实现的呢？这就是本段的重点。

1. 我对vertical-align文字对齐相关属性的理解
vertical-align属性可以说是CSS中兼容性最糟糕的属性之一了。比如说与文字相关的vertical-align属性，vertical-align:text-top;和vertical-align:text-bottom属性，这两个属性的解释IE浏览器（IE6-8）和现代浏览器是不一样的两个派别。到底哪种表现是正确的，这是不能随便做定论的。无论实现的机制如何，若能实现类似的效果表现，其实都可以说是正确的。在一般的使用条件下，例如小图标+文字，vertical-align:text-top这类文字对齐类属性在不同浏览器下的差异是较小的，这很难让我们去思考与理解这些差异在什么地方。但是，如果我们将测试的元素进行简化与放大，那么差异显而易见，也更利于我们思考其中的原因所在。

我们可以参见下面的测试代码，一窥IE家族和现代浏览器下text相关vertical-align的差异表现：

当line-height作为唯一的高度来源，且远远大于content area高度的时候（只与字体大小相关），此时我们可以喝直观的看到不同浏览器下的表现。上面代码很简单，一个行高200像素的div，里面有一个带有vertical-align:top属性的字体大60像素的inline水平的行内元素，边框只是便于观看识别留下的。

在展示不同浏览器下的表现之前，您可以先按照自己的理解想想会是什么样的表现。

说实话，以我之前纯粹的所谓想象经验式的理解，应该是后面的文字与大号文字的顶部对齐，事实是如何呢？看下面的IE阵营和现代浏览器阵营下的表现截图：

 
对比IE7浏览器和IE8浏览器下的表现我们可以看到，就文字的垂直对齐方面，两者是一样的，这也很符合自己以往对vertical-align:text-top的形象化的了解，也就是文字顶部对齐，看IE浏览器下就是文字顶部对齐的，后面的文字的顶部就与前面大号文字的顶部的文字对齐。所不同的就是IE8浏览器的外部div的高度被撑开了27像素，差不多是1/2个文字大小的高度。下面看看两个代表性的现代浏览器下的样式表现（Firefox3.6&Chrome5）：

经过我的仔细对比，Firefox3.6下的页面表现欲Chrome5浏览器下的是一模一样的，不仅如此，还与Opera浏览器也是表现一致。于是，就单纯从页面表现上来看，出现了两个阵营，不太和谐的IE阵营以及高度一致的现代浏览器阵营。但是究竟孰是孰非呢？这需要慢慢说来！

就表象而言

似乎可能好像IE浏览器下的表现符合我之前对vertical-align:text-top似是而非的理解，文字顶部对齐。看那，IE浏览器下，无论是IE6还是IE7或是IE8都是这样子的。相比之下，现代浏览器下的样式表现有些令人费解。OK，要追寻问题的解决最好的方法就是寻找他的根源，去需找它的定义，而不要根据一些表象而去臆测。

text-top aligns the top of the box with the top of the parent element’s font

翻译过来就是：让当前box的顶部与父元素的文字的顶部对齐

所以我们只要恰准了box的顶部以及父元素文字的顶部，就可以知道这类表现是怎么回事，哪种表现更加符合其本身的定义。

当前box的顶部
在本实例中，当前box是包裹着“大大的文字”的这5个文字的span标签，那么这个标签的顶部在哪里呢？按照我对inline box模型的理解，这个标签的顶部应该是在——见下图标注：

 
上图中蓝色的参考线就是这个span box的顶部。如果您了解line box模型，这个不难理解。line box中重要的几个概念是：content area，inline box(以及匿名inline box)，以及由inline boxes组成的line box。1. 其中content area可以理解为内容实体，也就是图片中的文字，我们设置span标签的border属性或是background属性，所看到的围绕文字的边框以及背景色的区域就是指的content area，这个东西仅仅与文字的大小相关，其作用仅仅是显示内容而已，很多重要的工作都不是content area来执行的。

2. 每个inline属性的标签外部都有一个inline box，这个inline box是看不见的，这个看不见的inline box扮演者重要的角色，此box与CSS中的line-height属性相互配合构成了元素高度堆叠的基础。以我的理解，inline box的高度纯粹就是有元素的line-height或是继承的line-height值决定的。例如本实例中，父div的line-height为200像素，自然，含“大大的文字”的span标签所在的inline box的高度就是200像素，换句话说，这个含有vertical-align:text-top属性的span标签的实际高度是200像素。

3. 本实例中有一段文字“后面是静止的文字”外部并未直接包裹任何标签，但是这段连续的文字外部也包裹了一个看不见的inline box（称之为匿名inline box），其本质以及一些表现与inline box几乎无异。也能占据200像素的高度。

4. span标签外部不可见的inline box以及文字所在的匿名inline box共同组成了line box，line box也是不可见的，每行文字有且仅一个line box，line box的高度有其内部的一系列的inline boxes高度共同决定，由内部的inline boxes的上下最大绝对差值决定的。例如本实例红，在现代浏览器下，外部div的高度之所以会被撑开，是内部两个inline boxes共同作用的结果。

所以结合上面的简单分析，本实例中含有vertical-align:tetx-top属性的span标签实际的box区域应该如下图半透明绿色区域：

父标签的文字顶部
具体什么是“父元素的字体”我也不是很清楚，这是个很虚的概念，我甚至怀疑这本身就是个抽象出来的概念，例如一个div中两个inline水平的标签，一个vertical-align:text-top另外一个vertical-align”text-bottom，那么哪个才是这里的&