行內元素vertical-align:middle在html5和xhtml1.0及以下版本中的表現差異

日期：2013-11-23  來源：攀枝花惠康網絡公司

經由同事啄木鳥多番測試終于找出了差異的問題地址，那就是行內元素的vertical-align:middle樣式。具體看demo1 (DOCTYPE為HTML 5)和demo2 (DOCTYPE為XHTML 1.0)。

今天在做頁面的時辰無意中發現靜態頁面中小停筆和文本對的很齊的，在線上的頁面卻小停筆和文本沒有對齊。同事啄木鳥找出的原因是靜態頁面和線上的頁面的html DOCTYPE紛歧樣，靜態頁面為html5，線上的頁面xhtml 1.0；一向覺得xhtml和html5默示上是一樣的，只是DOCTYPE紛歧樣！

注：

1. 以上demo只測試了firefox 7和chrome，ie各個版本沒有測試；
2. DOCTYPE為xhtml 1.1和DOCTYPE為html5的默示一致；
3. DOCTYPE為xhtml 1.0和DOCTYPE為html 4的默示一致；

發生差異的具體原因未知，未做深切進修，其他css屬性不知道是不是也會存在細微的差異，如不美觀您知道原因或者也碰著過這方面的問題，接待留言奉告交流，感謝感動涕零！