整個五月都沒有在維護blog,
雖然有不少東西可以寫,但就是因為懶...
所以這次一定要趁還想寫的時候趕快寫下來...
今天,再作一個網頁特效的時候,
遇到了一個狀況,
因為要作的功能是,捲動瀏覽器的捲軸後,
廣告圖片會跟著滑動.
而這功能,在網路上已經有很多範例了,
所以特別挑了一個簡短而且在IE跟Firefox上都可以用的來,
稍微修改一下,寫個範例測試,沒有問題就想說可以開始套了,
結果沒想到將那個片段套在程式裡以後,卻不會動...
所以只好重頭debug了.
debug到後來才發現,
原本的測試網頁中使用的document.body.scrollTop是正常的,
但是套用到aspx的頁面時,
不管怎麼捲動,document.body.scrollTop都是0.
google一下後發現,原來是因為網頁的DOCTYPE的問題,
在測試的網頁中,是用下面這片段
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
但是在網站中,是用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(ps.這是在.Net studio中預設新增網頁時會加上去的.)
所以原本的document.body.scrollTop要改成document.documentElement.scrollTop就可以了.
update - 20070614:
另外發現...原以為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
沒有留言:
張貼留言