行内元素vertical-align:middle在html5和xhtml1.0及以下版本中的表现差异
浏览:1272次 出处信息
今天在做页面的时候无意中发现静态页面中小图标和文本对的很齐的,在线上的页面却小图标和文本没有对齐。同事啄木鸟找出的原因是静态页面和线上的页面的html DOCTYPE不一样,静态页面为html5,线上的页面xhtml 1.0;一直以为xhtml和html5表现上是一样的,只是DOCTYPE不一样!
经过同事啄木鸟多番测试终于找出了差异的问题所在,那就是行内元素的vertical-align:middle样式。详细看demo1 (DOCTYPE为HTML 5)和demo2 (DOCTYPE为XHTML 1.0)。
注:
- 以上demo只测试了firefox 7和chrome,ie各个版本没有测试;
- DOCTYPE为xhtml 1.1和DOCTYPE为html5的表现一致;
- DOCTYPE为xhtml 1.0和DOCTYPE为html 4的表现一致;
产生差异的具体原因未知,未做深入学习,其他css属性不知道是不是也会存在细微的差异,如果您知道原因或者也碰到过这方面的问题,欢迎留言告知交流,感激不尽!
建议继续学习:
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:css 透明度完全兼容的写法
文章信息
- 作者:愚人码头 来源: WEB前端开发
- 标签: vertical
- 发布时间:2011-10-12 00:11:23
建议继续学习
近3天十大热文
- [67] Go Reflect 性能
- [67] Oracle MTS模式下 进程地址与会话信
- [67] 如何拿下简短的域名
- [61] IOS安全–浅谈关于IOS加固的几种方法
- [60] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [47] 界面设计速成