炫意html5
最早CSS3和HTML5移动技术网站之一

xhtml/html5的表现差异

看过《html5设计原理》的同学都知道其中有个观点,那就是html5的头部doctype仅仅是针对验证器的,而对于IE则是让其按照标准模式表现的标记。

事实上标准浏览器在是否加doctype是一样的。

但其实这其中还是有所差异,不知道是否是浏览器刻意而为还是什么原因,但它就是存在。

使用老式html/xhtml的docytpe和html5的doctype的确存在细微差异

大家还记得图片底部那3px的空隙么,可能有些同学纳闷,那个空隙好像有些时候有有些时候没有,没错,这个区别就在于doctype。

我们来看两个例子:

xhtml:http://blog.dmtuan.com/demo/xhtml-html5/xhtml.html

html5:http://blog.dmtuan.com/demo/xhtml-html5/html5.html

请用火狐/chrome/ie8以上观看,我发现在使用xhtml形式的doctype或者更老的html甚至不加doctype,在这些浏览器里图片下面的3px间隙消失了。而在html5下却又出现了。

我作个假设:

这些浏览器开发者似乎是想把这个图片下的间距给去掉,甚至不加doctype也是没有间隙的。

但html5出现了,而似乎是为了和IE6/7以前的老式浏览器统一,或者是别的什么原因,加上了<!DOCTYPE HTML>后,这个间隙又出现了。

再看看下面的例子:

xhtml:http://blog.dmtuan.com/demo/xhtml-html5/xhtml-vm.html

html5:http://blog.dmtuan.com/demo/xhtml-html5/html5-vm.html

同样的,在xhtml和老式html doctype或者不加doctype的情况下,标准浏览器和html5的doctype展现依然不同,这里是vertical-align:middle;的问题。

虽然这个做法是好的,但对于一些需要升级到html5的网站来说,往往一些小的差异会导致整个页面出现问题。升级还是要谨慎。

—————-华丽的分割线————–

原来 html5 doctype激活 standard mode,xhtml1.0激活almost standard mode(限制性quick mode)

这里有一个详细的列表来阐述两者的区别。http://www.quirksmode.org/css/quirksmode.html#t15

其中提到了在quirks mode下img默认是block(去掉img下3px间隙的解决办法之一)的,所以导致上面大家所见的。

而在img后面写入一些字符后,3px间隙又会出现,似乎是又变成了inline。

转自:http://blog.dmtuan.com/?p=539

炫意HTML5 » xhtml/html5的表现差异

CSS3教程HTML5教程