HTML5加左<!DOCTYPE HTML>反而有問題

本帖最後由 3ldk 於 2015-3-4 18:35 編輯

這是一個非常簡單, 上網copy的example
如果成功, 會見到一個div跟著個畫面走
以下依個example, 係會不成功的
成功與不成功, 差別只在於有無<!DOCTYPE HTML>
即係話, 如果delete左<!DOCTYPE HTML>, 所有野都會work
有<!DOCTYPE HTML>果陣, 打開console, debugger, 睇唔到有任何javascript既error, 亦無警告話有任何驗證問題

何解有<!DOCTYPE HTML>反而有問題? 問題出在哪?
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. </head>
  6. <body>

  7. <div id="iRFloating" style="position:absolute;top:100;left:1000;">
  8. content
  9. </div>

  10. ppppppppp<br/>
  11. ppppppppp<br/>
  12. ppppppppp<br/>
  13. ppppppppp<br/>
  14. ppppppppp<br/>
  15. ppppppppp<br/>
  16. ppppppppp<br/>
  17. ppppppppp<br/>
  18. ppppppppp<br/>
  19. ppppppppp<br/>
  20. ppppppppp<br/>
  21. ppppppppp<br/>
  22. ppppppppp<br/>
  23. ppppppppp<br/>
  24. ppppppppp<br/>
  25. ppppppppp<br/>
  26. ppppppppp<br/>
  27. ppppppppp<br/>
  28. ppppppppp<br/>
  29. ppppppppp<br/>
  30. ppppppppp<br/>
  31. ppppppppp<br/>
  32. ppppppppp<br/>
  33. ppppppppp<br/>
  34. ppppppppp<br/>
  35. ppppppppp<br/>
  36. ppppppppp<br/>
  37. ppppppppp<br/>
  38. ppppppppp<br/>
  39. ppppppppp<br/>
  40. ppppppppp<br/>
  41. ppppppppp<br/>
  42. ppppppppp<br/>
  43. ppppppppp<br/>
  44. ppppppppp<br/>
  45. ppppppppp<br/>
  46. ppppppppp<br/>
  47. ppppppppp<br/>
  48. ppppppppp<br/>
  49. ppppppppp<br/>
  50. ppppppppp<br/>
  51. ppppppppp<br/>
  52. ppppppppp<br/>
  53. ppppppppp<br/>
  54. ppppppppp<br/>
  55. ppppppppp<br/>
  56. ppppppppp<br/>
  57. ppppppppp<br/>
  58. ppppppppp<br/>
  59. ppppppppp<br/>
  60. ppppppppp<br/>
  61. ppppppppp<br/>
  62. ppppppppp<br/>
  63. ppppppppp<br/>
  64. ppppppppp<br/>
  65. ppppppppp<br/>
  66. ppppppppp<br/>
  67. ppppppppp<br/>
  68. ppppppppp<br/>
  69. ppppppppp<br/>
  70. ppppppppp<br/>
  71. ppppppppp<br/>
  72. ppppppppp<br/>



  73. <script>
  74.   var adWidth = 160;
  75.   var nowX = 1000;
  76.   var nowY = 100;
  77.   fad_style = document.getElementById('iRFloating').style;
  78.   function fadIni()
  79.   {
  80.       innerWidth = document.body.clientWidth;
  81.       innerHeight = document.body.clientHeight;

  82.       edge = (innerWidth-1000)/2;

  83.       if( edge > adWidth )
  84.       {
  85.           posX = edge + 1000;
  86.       }
  87.       else
  88.       {
  89.           posX = innerWidth-adWidth;
  90.       }

  91.       posY = 100;

  92.   }
  93.   function fadRefresh()
  94.   {
  95.       offsetX = posX + document.body.scrollLeft - nowX;
  96.       offsetY = posY + document.body.scrollTop - nowY;
  97.       nowX += offsetX / 5;
  98.       nowY += offsetY / 5;
  99.       fad_style.left = nowX;
  100.       fad_style.top = nowY;

  101.       floatID = setTimeout('fadRefresh()', 20 );
  102.   }

  103.   function fadStart()
  104.   {
  105.       fadIni();
  106.       window.onresize=fadIni;
  107.       fadRefresh();
  108.   }

  109.   fadStart();
  110. </script>
  111. </body>
  112. </html>
複製代碼

落左doctype要係head入面第一句加番meta charset, 因為你有中文, 好大機會parse錯

TOP

top:100;left:1000;

where is the unit?

TOP

本帖最後由 神秘二代 於 2015-3-4 17:14 編輯

d script放在html tag外面...笑了...正常是放在head中的.....如真的不能才放在body之後, 但絕不是放在html外面= =....
variable define沒用var....看來你是新手吧...傳送門給你
http://www.w3schools.com/html/
http://www.w3schools.com/js/

另外你這個不算是html5...因為沒有用到html5的feature......

TOP

Quirks mode 與 Strict mode 分別

TOP

另外你要做嘅野根本可以完全用 CSS 做, 一個 position: fixed 已經搞掂, 唔駛 Javascript
http://caniuse.com/#feat=css-fixed

未打好基礎就唔好亂炒 code, 網上有太多過時資訊, 只適合二十世紀使用

TOP

其實我試過放係body入面, 不過都係唔得, 所以我先直接跟example放係html出面

js沒有var理應沒問題, 就算真係有問題, 照理應該會有symbol not found之類既error

js入面沒有px這類unit, 而且該attribute又真係一個int, 所以唯有比數字佢

不過, 我都照左建議, 改返晒, 加左meta, cut晒中文, 加埋var, 放入body, 但一樣係唔work, 可見並非以上所講的問題


另外我做緊既野其實用css做唔到, 所以一定要用js做

TOP

  1. fad_style.left = nowX+"px";
  2. fad_style.top = nowY+"px";
複製代碼

TOP

本帖最後由 chi251155 於 2015-3-4 22:39 編輯

回覆 4# 神秘二代

放係head會拖慢個page loading, 其實最好放body最後
w3schools累死人, 上mdn啦

TOP

回覆 8# minazuki


    正解,以前都犯過呢個錯

TOP