今天,在作一个网页特效的时候,
遇到了一个状况,
因為要作的功能是,卷动瀏览器的卷轴后,
广告图片会跟著滑动.
而这功能,在网路上已经有很多范例了,
所以特别挑了一个简短而且在IE跟Firefox上都可以用的来,
稍微修改一下,写个范例测试,没有问题就想说可以开始套了,
结果没想到将那个片段套在程式裡以后,却不会动…
所以只好重头debug了.
debug到后来才发现,
原本的测试网页中使用的document.body.scrollTop是正常的,
但是套用到php的页面时,
不管怎麼卷动,document.body.scrollTop都是0.
google一下后发现,原来是因為网页的DOCTYPE的问题,
在测试的网页中,没定义到文档DTD标准
但是在网站中,是用
所以原本的document.body.scrollTop要改成document.documentElement.scrollTop就可以了.
这才发现原以為ie跟firefox都正常的范例是有点问题的…
而问题点在於,
未使用DTD前,在ie跟firefox都可以使用下列的语法来设定位置
document.getElementById(“adimg”).style.top = 200;
但是在使用DTD之后,
ie还是可以接受上面的语法,
但是在firefox却是不行的,
而firefox所能接受的如下(需要加上单位)
document.getElementById(“adimg”).style.top = “200px”
而这个在ie上是接受的,
所以只要改成如上的语法就可以在ie跟firefox都正常了.
范例网页:
原始 : http://ajunlee.googlepages.com/rolling.htm
使用DTD : http://ajunlee.googlepages.com/rolling_err.htm
使用DTD修正后 : http://ajunlee.googlepages.com/rolling_ok.htm
0 Comments.