<!DOCTYPE html>有り無しについて
Javascript勉強中の初心者です。Windws7を使っています。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>バウンド</title>
<style>
.area
{ width:640px;height:480px;background-color:yellow;
border-bottom:solid 2px black;
}
</style>
<script>
var x=560;var y=420;var xv=10;var yv=10;
function moveChar()
{ x+=xv;y+=yv;
if((x>560)||(x<0)){ xv=-xv; }
if((y>420)||(y<0)){ yv=-yv; }
document.chara.style.left=x;
document.chara.style.top=y;
}
</script>
</head>
<body onLoad="setInterval('moveChar()',40)">
<div class="area">
<p>
<img src="parts/photo.jpg" name="chara" width="80px" height="60px"
style="position:absolute;left:560px;top:420px;">
</p>
</div>
</body>
</html>
これは、あるサイトのサンプルを改造したバウンド実験のプログラムです。この先頭には
参照した時から<!DOCTYPE html>が無く、それだと意図通り動きます。それが、
<!DOCTYPE html>を先頭につけるとおかしくなります。ＩＥ、ＦＸ、ＧＣ、Ｏｐｅｒａどれでも
確認しています。初期位置にじっと現れ、突然、角へ跳ねて、やがて初期位置の対角へ跳ねて終了。
（1）なぜこうなるのでしょうか？
（2）<!DOCTYPE html>があっても動くようにするにはどう直せばいいのでしょうか？
（3）もしかして、<!DOCTYPE html>は無用ですか？
<!DOCTYPE html>が無いとどう困ることが起こり得るのでしょうか？
どなたか、ご教示ください。よろしくお願いします。
お礼
ありがとうございました。