月度归档:2011年02月

都是 标签 惹的祸

前几天闲着无聊,用jQuery写了一个很炫的动画效果,昨天拿给朋友看,小小炫耀了一番。
可是没想到就是这番小炫耀,造成了我今天小小的杯具…
当时朋友看了效果觉得还不错,让我帮忙加到她的博客上。
我把代码原封不动的copy上去之后却发现不能正常显示效果,
总是莫名其妙的出现了一些随机bug,每次的效果竟然都不同。
一开始以为是某个js冲突或者css样式冲突,当我把博客上所有js和css都删掉之后,还是不能正常显示…
我个亲娘四舅奶奶的郁闷啊,被逼无奈,用上了排除法。
先从代码相近的html元素开始,一点点删除,一点点排除,直到最后让我扒的网页只剩一个裸体特效了,竟然还是不能正常显示…
邪门了,我擦擦眼睛,仔细看了看我的demo代码和被扒的博客页面代码,发现唯一的区别就是 <!DOCTYPE> 标签了。
终于找到了问题所在,整个过程持续了2个小时。
原来朋友的博客是几年前做的,是HTML4的声明:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
我的demo效果是用EditPlus创建的,是XHTML声明:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
其实早在04年就读过阿捷关于DOCTYPE的文章,
不同的标签会让浏览器按照不同的html规范解释代码。
只是没想到<!DOCTYPE html>标签也会影响javascript的解释效果,这下吃了小亏,浪费了2个小时的宝贵时光。
记录下来,以免再犯。  😥