今天在做页面的时候无意中发现静态页面中小图标和文本对的很齐的，在线上的页面却小图标和文本没有对齐。同事啄木鸟找出的原因是静态页面和线上的页面的html DOCTYPE不一样，静态页面为html5，线上的页面xhtml 1.0；一直以为xhtml和html5表现上是一样的，只是DOCTYPE不一样！

经过同事啄木鸟多番测试终于找出了差异的问题所在，那就是行内元素的vertical-align:middle样式。详细看demo1 (DOCTYPE为HTML 5)和demo2 (DOCTYPE为XHTML 1.0)。

注：

1. 以上demo只测试了firefox 7和chrome，ie各个版本没有测试；
2. DOCTYPE为xhtml 1.1和DOCTYPE为html5的表现一致；
3. DOCTYPE为xhtml 1.0和DOCTYPE为html 4的表现一致；

建议继续学习：

1. 浅析line-height和vertical    (阅读：1257)