爲什麼HTML文檔類型DTD化妝CSS style.top在Firefox不工作8.0.1

我學習DHTML使用谷歌的樣品 http://code.google.com/edu/ajax/tutorials/samples/dhtmltest.html 爲什麼HTML文檔類型DTD化妝CSS style.top在Firefox不工作8.0.1

然而，當我在下面添加DOCTYPE DTD到源代碼，前移/向下將不再工作在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>

來源

2012-02-02 hetaoblog

順便說一句，'使用href =「javascript：...」'不是一個好主意。在大多數情況下，您可以將JavaScript處理程序放在'onclick'屬性中，並將'href'實際跳轉到其他位置。 – 2012-02-02 08:40:15

thx。你可以多談一點差異嗎？爲什麼我們不應該那樣做？ – hetaoblog 2012-02-02 09:00:37

這就是他們的意思。使用'href'作爲javascript處理程序而不是跳轉到另一個頁面基本上意味着你濫用它。但是，如果按照設計的方式使用它們，則可以區分用戶啓用Javascript的情況。例如。使用'onclick'進行AJAX調用，使用'href'來重新加載頁面（如果客戶端無法完成，則可以在服務器端進行處理）。 – 2012-02-02 09:33:37

在怪癖模式（沒有DOCTYPE聲明），你可以逃脫給予的東西，比方說，「40」的值，瀏覽器將承擔像素。

但是，在嚴格模式下（使用良好的DOCTYPE聲明時），您需要明確說出40像素的「40px」。因此，所有你需要做的是寫

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

是兼容標準，它都將使用和不使用DOCTYPE聲明的工作。

來源

2012-02-02 08:26:58

thx！這現在有用！當搜索怪癖模式與標準模式之間的差異時，我沒有得到一個很好的參考幫助我發現這一點。你能給一些好的鏈接/建議嗎？ thx – hetaoblog 2012-02-02 08:58:10

[這裏]（https://developer.mozilla.org/en/Mozilla_Quirks_Mode_Behavior）是Firefox中的怪癖列表。其他瀏覽器大部分都有相同的怪癖（因爲他們都試圖模擬Netscape 4），但是存在差異。因此，如果您希望您的網頁在不同的瀏覽器中看起來相同，那麼在HTML文件中使用嚴格模式會更好。 – 2012-02-02 09:25:25

thx，這真的幫了我很多！ – hetaoblog 2012-02-03 05:14:49

爲什麼HTML文檔類型DTD化妝CSS style.top在Firefox不工作8.0.1

回答

相關問題