今天在做页面的时候无意中发现静态页面中小图标和文本对的很齐的,在线上的页面却小图标和文本没有对齐。同事啄木鸟找出的原因是静态页面和线上的页面的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属性不知道是不是也会存在细微的差异,如果您知道原因或者也碰到过这方面的问题,欢迎留言告知交流,感激不尽!
人家明明是啄米鸟。→_→
html5 doctype激活 standard mode,xhtml1.0激活almost standard mode(限制性quick mode)
如很常见的img标签在quick mode中默认 display:block,在standard中 inline,在almost中一般是block,更多差异当中有提到vertical-align:《What happens in Quirks Mode》https://www.cs.tut.fi/~jkorpela/quirks-mode.html
@catge, 谢谢!
IE8跟其他内核浏览器在过度的doctype下是近乎标准模式,严格版跟html5的doctype是标准模式,混杂模式img也是行内替换元素。
近乎标准模式的一些规则是参考的CSS2.0,2.0跟2.1在line box的定义上是不同的,2.1有明确的定义,2.0受到vertical-align的影响,具体是啥忘了~,官网搜吧~。html5的头哪怕是严格版的头大伙早就用了,而且这个差异也不那么重要,所以研究这个除了装逼外没啥实际用途。再扯还能扯扯css各个版本差异,IE67支持的规范,近乎标准模式的由来啥的~。
高度差了2像素,把vertical-align:middle放块级元素就不会了
功能很使用, 可不好用.
这个问题跟你一样遇见过,后来都改成html DOCTYPE了
擦,这么细微的差别都记录,这文章的作者可真细心。
原因呢?