行内元素vertical-align:middle在html5和xhtml1.0及以下版本中的表现差异

来源：互联网发布：安卓版windows模拟器编辑：程序博客网时间：2024/06/08 13:40

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

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

　　注：以上demo只测试了firefox7和chrome，ie各个版本没有测试；

　　DOCTYPE为xhtml1.1和DOCTYPE为html5的表现一致；

　　DOCTYPE为xhtml1.0和DOCTYPE为html4的表现一致；

　　产生差异的具体原因未知，未做深入学习，其他css属性不知道是不是也会存在细微的差异，如果您知道原因或者也碰到过这方面的问题，欢迎留言告知交流，感激不尽！