“原本工作正常的对联广告突然宣布罢工,为什么?标准化真的那么脆弱吗?"
老实说我不是很喜欢对联广告,呵呵。可是总有人提出这样的要求,所以这个还是有些意义的,闲话少说,进入正题。
不符合标准的正常工作的对联广告:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不符合标准的正常工作的对联广告</title>
<script language="JavaScript" type="text/javascript">
lastScrollY=0;
function heartBeat(){
diffY=document.body.scrollTop;
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
document.getElementById("lovexin14").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"
suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"
document.write(suspendcode12);
document.write(suspendcode14);
window.setInterval("heartBeat()",1);
</script>
<style type="text/css">
<!--
#lovexin12,#lovexin14{
width:120px;
height:250px;
background-color:#e5e5e5;
border:1px solid #ddd;
}
html,body{
height:1000px;
}
#mm{
height:1000px;
}
-->
</style>
</head>
<body>
<div id="mm">
</div>
</body>
</html>
这个是可以正常运行的,只要你不使用文档类型声明。
但是,标准设计的网页需要进行文档类型声明以告知浏览器按照怎样的规则去解析网页。当我们使用过渡型标准声明的时候,我们发现这个原本工作正常的对联代码不再起作用。
这是符合标准的代码,和上面的区别是它加了文档类型声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
符合标准的不能正常工作的对联广告
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>符合标准的不能正常工作的对联广告</title>
<script language="JavaScript" type="text/javascript">
lastScrollY=0;
function heartBeat(){
diffY=document.body.scrollTop;
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
document.getElementById("lovexin14").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"
suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"