这两天读了《CSS权威指南第三版》的第6章，对vertical-align小节有些疑惑，在浏览器对text-top和text-bottom的处理上作者讲的不够清晰，例子也很片面。下面具体跟大家谈谈。
友情提示：下面的内容需要你先理解 替换元素，非替换元素，css行模型（行高，行间距，内容区，行内框，行框）等相关概念，有欠缺的朋友请先到google充电。
vertical-align的其它取值这里就不讲了，想了解的可以参考下面链接的几篇文章，这里只讲text-top和text-bottom.
在讲到text-bottom时，作者原文是这样说的：
"vertical-align: text-bottom refers to the bottom of the text in the line. For the purposes of this value, replaced elements, or any other kinds of non-text elements, are ignored. Instead, a "default" text box is considered. This default box is derived from the font-size of the parent element. The bottom of the aligned element‘s inline box is then aligned with the bottom of the default text box. "
这段话中的"For the purposes of this value, replaced elements, or any other kinds of non-text elements, are ignored."我觉得作者表述得很模糊，究竟ignored是什么？ 是指在替换元素、非文本元素（replaced elements, or any other kinds of non-text elements）这些元素上应用vertical-align:text-bottom时这句关于vertical-align的声明会被忽略呢，还是指在计算text-bottom的位置时，这些元素对行框高度的影响会被忽略呢？？ 如果是前者，可我测试的demo却证明恰好相反； 如果是后者，那么"For the purposes...is considered. "这句话在这里除了增加人的疑惑外没有任何作用。
根据我的测试，得出的结论是：text-bottom和text-top应用于<img>等行内替换元素时，在各浏览器中的表现一致；当应用于<span>等行内非替换元素时，在各浏览中的表现不尽相同。因此，作者上面那句话中ignored的意思应该是后者。
按照规范的定义，设置了vertical-align: text-bottom;的inline元素的inline
box的底端将与父元素的文本行的底端对齐。其中父元素的文本行由父元素的font-size及父元素的基线决定，也就是说text-bottom和text-top的位置只与父元素的font-size及基线位置有关。看下面的例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vertical-align：text-bottom</title> <style> p { width: 800px; margin: 20px auto; padding: 0; font-size: 12px; background: pink; line-height: 68px;} p strong { font-size: 36px; background: skyblue; vertical-align: text-bottom;} p span {background: yellow;} p img{ vertical-align: text-bottom;} </style> </head> <body> <p> <span>normal text</span> <strong>box</strong><img src="line.png" /><strong>box</strong> </p> </body> </html>
在各浏览器的效果如下，其中黄色的文本是父元素的文本行：
1) IE7/8/9/10中：可以正确处理text-bottom和text-top,行内替换元素和行内非替换元素的效果一致.
2)Opera(18.0.1284.63),Safari(5.1.7),Chrome(29.0.1547.66 m),FireFox(26.0):
在这几个浏览器中，行内非替换元素（文字‘box’）的inline-box的文底端明显没有与父元素的文本行底端对齐，而替换元素的底端是对齐的。 若是按照规范的定义，那么这些浏览器对<strong>标签的处理就是错误的，但让我奇怪的是：这么多浏览器居然以近乎完全相同的方式犯了同一个错误。这种情形让我觉得这些浏览器采用了相同的但不同于规范的机制，但至于它们为什么这么做，暂时不得而知，我曾经为了弄懂这个问题在查阅了很多大牛的文章（下面列出了其中的一些），但没有一篇文章中提到这个问题的，所有文章（包括《css权威指南》，这也是为什么我说作者的例子片面的原因）在讲到text-bottom和text-top时，举例都是用的图片，而对<span>等却只字不提，因此我才写了这篇文章来大家探讨。
虽然实际工作中，text-bottom与text-top并不常用，即使用了，与是对齐图片居多，但还是想弄明白这一点，与有哪位朋友明白的，请留言告知，万分感激！！
vertical-align的相关文章：
http://phrogz.net/css/vertical-align/index.html
http://www.impressivewebs.com/css-vertical-align/
http://css-tricks.com/what-is-vertical-align/