截图时间是2012-09-05,图上可知淘宝已经更新了前端展现技术,由原来的XHTML转变成了HTML5,而京东则还是原来的XHTML
所以就好奇的试了下HTML5,测试了HTML5对于css样式的兼容性,测试环境是FF6.0,IE8.0
a.css文件
.abc,.abc div{
border:1px red solid;
padding:10px;
}
border:1px red solid;
padding:10px;
}
test.html
<!doctype html>
<head>
<title>learning html5</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="a.css"/>
</head>
<body>
<div class="abc">
html5 next generation markup language
<div style="width:80px;height:80px">
hello! 脚本通过DOM树与页面进行相互作用
</div>
</div>
</body>
<head>
<title>learning html5</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="a.css"/>
</head>
<body>
<div class="abc">
html5 next generation markup language
<div style="width:80px;height:80px">
hello! 脚本通过DOM树与页面进行相互作用
</div>
</div>
</body>
附上网页运行效果图
同样的代码在ff和ie下显示效果居然相同(padding对于ff和ie是不同的)
如果去掉html5的doctype申明,也就是这一句代码<!doctype html>,同样的代码效果显示如图
有图有真相把,哈哈!没有<!doctype html>FF浏览器中的div明显要大一些,初试HTML5,让css hacker情何以堪呐!