今天在做页面的时候无意中发现静态页面中小图标和文本对的很齐的，在线上的页面却小图标和文本没有对齐。同事啄木鸟找出的原因是静态页面和线上的页面的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.0和DOCTYPE为html 4的表现一致；
3.DOCTYPE为xhtml 1.1和DOCTYPE为html5的表现一致；
为什么会产生这样的差异我们还没有做过深入的研究。而在其他的css中会不会也出现如此的差异目前也不是很清楚。如果您在构建的过程中碰到了类似的问题欢迎您在岚海网络资讯频道中和我们交流。
本文来自：WEB前端开发
