为什么html doctype dtd使css style.top无法在firefox 8.0.1中运行

时间:2012-02-02 08:07:50

标签: html css

我正在使用谷歌的样本学习dhtml http://code.google.com/edu/ajax/tutorials/samples/dhtmltest.html

但是,当我将下面的doctype dtd添加到源代码中时,moveup / down将不再适用于firefox 8.0.1

主要是,我认为以下声明不再适用

myObj.style.top = texttop;

任何人都可以提供建议吗?谢谢。

下面是源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html lang="en">
<HEAD>
<TITLE>Example</TITLE>
<STYLE TYPE="text/css">
body {font: 14px arial;
color: #000066;
}
#myText {position: absolute;
top: 100px;
left: 400px;
font: 24px arial;
font-weight: 900;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">


var texttop = 100;
var textleft = 400;
function vanish(flag) {
var myObj = new getObj('myText');
myObj.style.visibility = (flag) ? 'hidden' : 'visible'
}
function moveUpDown(amount) {
var myObj = new getObj('myText');

texttop += amount;
myObj.style.top = texttop;
}
function moveLR(amount) {
var myObj = new getObj('myText');
textleft += amount;
myObj.style.left = textleft;
}
function changeColor(color) {
var myObj = new getObj('myText');
myObj.style.color = color;
}
function changeStyle(style) {
var myObj = new getObj('myText');
myObj.style.fontStyle = style;
}
function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else
return;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="myText">Change Me!</DIV>
<p>
<A CLASS="page" HREF="javascript:moveUpDown(40);">Down</A><BR>
<A CLASS="page" HREF="javascript:moveUpDown(-40);">Up</A><BR>
<A CLASS="page" HREF="javascript:moveLR(-40);">Left</A><BR>
<A CLASS="page" HREF="javascript:moveLR(+40);">Right</A><BR>
<p>
<A CLASS="page" HREF="javascript:changeColor('orange')">Orange</A><BR>
<A CLASS="page" HREF="javascript:changeColor('green')">Green</A><BR>
<A CLASS="page" HREF="javascript:changeColor('purple')">Purple</A><BR>
<P>
<a CLASS="page" HREF="javascript:changeStyle('italic')" class="nohover">Italic</a><br>
<a CLASS="page" HREF="javascript:changeStyle('normal')" class="nohover">Normal</a><br>
<p>
<A CLASS="page" HREF="javascript:vanish(1)">Vanish!</A><BR>
<A CLASS="page" HREF="javascript:vanish(0)">Re-appear</A><BR>
<p>
</BODY>
</HTML>

1 个答案:

答案 0 :(得分:4)

在quirks模式下(没有DOCTYPE声明),你可以放弃给出一些值,例如“40”,浏览器会假设像素。

但是,在严格模式下(使用良好的DOCTYPE声明时),您需要明确并为40像素说“40px”。 所以你需要做的就是写

myObj.style.top = texttop+'px';

与标准兼容,无论是否有DOCTYPE声明都可以使用。