瀏覽器特殊狀況報告書

Client 端 HTML 文件索引 回何處塵埃分類導覽

本表是作者自己本人使用各家瀏覽器時所遇到一些例外狀況，雖然不敢說這些就是 瀏覽器的 Bug ，但這種例外，絕對會造成 網頁設計者的不便。你如果正為了個小問題被瀏覽器整的七葷八素的，請來這看看， 搞不好前人早已被整過了。也希望各位網頁設計先進交流寶貴的經驗，如蒙來信指導 ，我一定儘速整理公布，以享網友。我的 email address： letsgo@ms6.url.com.tw

聯結重導之怪現象

所謂聯結重導，指的是 <A> 這個聯結標籤，通常用 HREF="FileURL" 方式聯結 其他網頁。但在 DHTML 裏我們常為了不直接把聯結寫死，而把聯結標籤用 <A onclick="functionName()">的方式，把希望聯結那個網頁，轉到 functionName 的 Script 敘述裏去判斷。

Navigator(4.5 中文版)怪狀
<A onclick="functionName()">這種敘述在 Explorer 裏有用，但在 Navigator 裏無用，因為沒有 HREF 屬性設定，Navigator 對 onclick 事件沒反應。一定要加上 HREF 屬性，如<A HREF="" onclick="functionName()">才行。
Navigator(4.5 中文版)和 Explorer(5.0 中文版)共同怪狀
一但你使用<A HREF="" onclick="functionName()">這樣的敘述，固然兩家 瀏覽器就可以通用此敘述，但又引來第二件麻煩事。那就是除了你在 functionName() 區段聯結一次以外，<A HREF="">的 Tag 本身會又連第二次。而 HREF="" 的 屬性指定，不是聯結空網頁的意思，而是把你 Server 端現路徑檔案一傢伙整個列在 Browser 視窗裏。
最後的解決之道
或許你問，難道沒有最後兩者都適用的解決辦法嗎？很高興的告訴你，有，很難過的 告訴你，可也夠囉嗦的了。
  1. 首先你的 Tag 要改寫成
    <A HREF="" onclick="return ReLinkNewPage()">
    加 return 敘述的用意是是否要執行 HREF="" 的敘述，由 ReLinkNewPage() 這個 function 的傳回值來決定。
  2. 其次你在 ReLinkNewPage() 這個 function 尾端要加下面的敘述，表示取消原 Tag 的動作。
    <SCRIPT LANGUAGE=JAVASCRIPT>
<!--
function ReLinkNewPage()
{
    ........ 你的聯結判斷敘述 ....
    return false;	//傳回否定值，用以取消 <A> 標籤的原動作。
}
-->
</SCRIPT>
  3. 如果你是 VBSCRIPT 使用者，那麼你的 Script 敘述可以這麼寫： 
    <SCRIPT LANGUAGE=VBSCRIPT>
<!--
Sub ReLinkNewPage()
    ........ 你的聯結判斷敘述 ....
    window.event.returnValue=false
    'returnValue 表示網頁事件傳回值
End Sub
-->
</SCRIPT>
報告日期：2000.1.29
報告人：老怪

破碎的表格

缺一塊的 <TD> Tag(Navigator 4.5 中文版)
在 HTML 中 <TR><TD></TD> 這樣沒有內容的儲存格標籤， 在 Explorer 中顯示是正常的，會顯示一個空白的儲存格。但 Navigator 就不能顯示 出一個空白的儲存格，而是會像缺了一格一樣的顯示出來，這在設定 TABLE BORDER 大 於 1 以上時尤其明顯。
解決之道
雖然在 IE 的 Frontpage Express 和 NC Composer 都採用在空 TD 標籤中插入中文 全形空白來解決，但我並不認同這種作法，因為如果用其他英文字組瀏覽器來看， 儲存格中會跑出一堆亂碼出來。所以還是應該用最正統得解決法，在 <TD></TD> 間插入 &nbsp;(No Break Space)字元。
報告日期：2000.1.29
報告人：老怪

抓不到的頁框

Navigator 的頁框遺失(4.5 中文版)
  1. 在網頁撰寫中，頁框(Frame)的啟用，對多網頁之組織及瀏覽，有莫大的便利，因此 我們常用： 
    <HTML>
<HEAD><TITLE></TITLE></HEAD>
<FRAMESET COLS="*.*"> or <FRAMESET ROWS="*.*">
    <FRAME NAME="firstframe">
    <FRAME NAME="secondframe">
</FRAMESET>
</HTML>
    這樣的敘述來將我們的網頁視窗分兩半，一半做為聯結操作的網頁，一半作為聯結顯示 的網頁。
  2. 有時我們在分頁網頁載入之初，會只先載入某頁框的網頁，等使用者在先載入網頁上做 某些選擇後，再決定另一半網頁要呈現什麼內容，這時我們的 Frame Tag 會這麼安排： 
    <FRAMESET COLS="*.*"> or <FRAMESET ROWS="*.*">
    <FRAME NAME="firstframe" SRC="menu.htm">
    <FRAME NAME="secondframe">
</FRAMESET>
    意思是先在 firstframe 頁框上載入 menu.htm ，而 secondframe 頁框則先空著，等 menu.htm 來決定呈現的訊息。
  3. 如果我們在 firstframe 頁框的 menu.htm 網頁上，想用 Script 敘述在 secondframe 頁框上寫些文字，JavaScript 標準做法是： 
        var secondDoc=parent.frames["secondframe"].document;
    secondDoc.open();
    secondDoc.write("Say some message!!");
    secondDoc.close();
    這在一般狀況下，Exporer 和 Navigator 都沒有問題，但如果你的 Frame Tag 是像 我們的設定 <FRAME NAME="secondframe"> ，也就是 secondframe 沒有載入 實體網頁，那麼 var secondDoc=parent.frames["secondframe"].document; 將無效， 因為在 Navigator 裏，沒有載入實體網頁的 secondframe 頁框，是無法參照到的頁框 。
解決之道
為了做出適用 Exproer 和 Navigator 通用的分頁網頁，就算一開始你不想在某頁框中 顯示任何訊息，也應該載入一個沒有實體內容的 blank.htm ，因為只有每一個頁框都 加入實體網頁，Navigator 的 frames 集合裏才能把每一個 frame 加進去。
報告日期：2000.1.30
報告人：老怪

混亂的物件參照

物件參照在 DHTML 的用途
網頁是由各種標籤構成的，標籤在 HTML 裏是一個個的 Tag 組成，但到了 DHTML ， 為了能在 Script 敘述中改變 Tag 表現，於是一個個標籤就被瀏覽器組成網頁物件， 供網頁設計者在 Script 敘述中叫用，對其加以動態改變。你要改變某部份網頁，你 就必須先在 Script 敘述中指明你要改變的是那個物件，這種在 Script 敘述中指明 改變目的物件的動作，就叫物件參照。也可以說物件參照是 DHTML 的第一步，也是 Script 敘述能夠工作最首要的動作。
最原始的物件參照--數字索引(Number Index)
幾乎所有的物件模組都提供數字索引的物件參照，但執行數字索引物件參照的先決 條件是必須按照物件模組的階層結構，才能用 ObjectName[Index Number] 方式， 一一去參照到相對應物件。如 Navigator 的 document 物件下有 forms,links,anchors... 等集合物件，如果你的 Script 敘述 要針對網頁中第一個 IMG 圖片做動作，那麼在 Script 敘述中，你可以用 var nowobj=document.images[0]取得此 IMG 的物件參照，加以動態改變。這種 用數字索引來物件參照，幾乎是所有的物件模組應用軟體都提供的基本能力，不論 IE or NC。
數字索引物件參照的不便
幾乎所有使用過程式語言的人都知道，在程式撰寫和修改中，指明行號或索引數字有 多麻煩。第一要算物件的排列次序很費事，第二萬一物件需要增減或次序變動，整個 程式敘述通通要改，那真是設計人員的一大折磨。所以為了減省設計負擔，瀏覽器軟 體開始提供第二種物件參照方式，名稱索引物件參照。
Navigator 的名稱索引物件參照
名稱索引物件參照最基本的方法就是在撰寫 HTML 時，在需要參照的標籤中取個名字 ，如我們可以： 
<IMG SRC="myhome.gif" NAME="homepic">
意思就是在網頁中插入 myhome.gif 這張圖片的同時，給它取名為 homepic。一但我們 給了標籤 NAME 的屬性之後，我們就可以在 Script 敘述中用 homepic 來動態改變 myhome.gif 這張圖片的呈現，譬如： 
    document.images.homepic.src="new.gif";
    //把圖片換成 new.gif
在這裏我們特別要提醒大家一件事，那就是在 Navigator 中並不是所有的 HTML 標籤都可以使用 NAME 來做物件參照，只有 document 物件下屬 集合物件 (詳細列表請參考 IE & NC 集合物件對照表 ) 的相對標籤 NAME 屬性 才會發揮作用。也就是在 Navigator 中，只有上述集合中的標籤才能動態改變，其他 標籤是不受 Script 敘述操作的。
新舊夾雜的混亂
這可以 forms 和 images 物件參照為代表，照完整而嚴謹的 Navigator 物件階層 結構來說，要用名稱索引參照到特定 form or image 物件，應該完整的語法是： 
    var formobj=document.forms.formName;
    var imageobj=document.images.imageName;
這也是其他集合物件能夠被名稱參照的惟一辦法，但實際上你如果用： 
    var formobj=document.formName;
    var imageobj=document.imageName;
這種偷懶的辦法，一樣可以執行順利，問題是其他種集合物件這麼做就會引起程式 錯誤了。之所以會有此種現象，可能是早期 Navigator 的物件模組結構階層並不嚴 謹，image 和 form 物件都直接放在 document 物件下，直到後來新增出更多集合 物件後，才把 image 和 form 也歸到集合物件裏，但為了相容問題，仍保留舊的參 照方式，而使 image 和 form 有兩種參照方法。
上層物件的混亂
或許大家會覺得同一個 image or form 物件被歸到兩個以上不同的集合物件中，雖然 混亂了嚴謹的階層結構，但為了相容的考慮，是個可以容忍的妥協，但這樣的方式卻 照成網頁物件只能向下參照，而無法向上回頭參照物件的結局。譬如我們已有個 document 集合物件，我們可以用迴圈逐項參照其中元素，而向下參照到它的 images, forms,links......等子物件 (如何用迴圈逐項參照子元素請參考 剖開網頁物件模組) ；但如果我們有的是一個 image 物件呢？我們如何回頭去 參照到它的上層物件？如果我們採用嚴謹的階層結構，一個物件不管有多少子物件，但 只能有一個父物件，那麼回頭向上參照是很容易的；如 image 我們限定它就在 images 集合裏，而 images 又只在 document 集合裏，那麼要從 image 物件參照到 document 物件，只要 var obj=image.parent.parent 即可。但現在的實際狀況卻不是這樣的， image 沒有 parent 屬性，大部份的網頁物件，除了 window 物件外，都沒有 parent 和 top 這樣的屬性。原因很簡單，image 是 document 的 child ，也是 images 的 child ，那麼 image 的 parent 到底是 document 還是 images？由此可知瀏覽器為了 相容的考慮，結果是造成 DHTML Script 撰寫的困難，因為如果你的 Script 要處理 跨階層的物件動作，你必須自己宣告變數去紀錄，而無法利用既存的瀏覽器物件模組 結構的協助。
anchor 和 link 區分不清
或許是當初 W3C 在制定 HTML 標準時就沒有把 anchor 和 link 做良好的區分， 都用 <A> 這個標籤來代表，而用 <A HREF="PageURL"> 表示是一個 link，用 <A NAME="BookMarkName"> 表示是一個 anchor。這在 HTML 的撰寫 上不會有什麼困擾，但在需要用 NAME 屬性來參照物件的 Script 敘述中卻成了大麻 煩。因為你 
    <A HREF="PageURL" NAME="linkName">
這個敘述的本意是把它當做個 link 物件，加 NAME 屬性是為了可以在 Script 敘述 中用名稱索引參照。但 Navigator 可不是這麼想的，它把你這敘述當做兼具 anchor 與 link 屬性的物件。如果你用 
    var linkObj=document.links.linkName;
結果 Navigator 卻給你錯誤的回應。如果你用 
    var linkObj=document.anchors.linkName;
Navigator 反而接受了，意思是用名稱索引，只可以參照 anchor 物件，那 link 物件如何參照呢，你必須 
    var linkObj=document.links[index number];
這是什麼意思呢？就是 link 物件不接受名稱索引參照，只接受數字索引參照。你再 觀察 link 物件，你會發覺它根本沒有 name 屬性，只有 anchor 才有。怎樣，很 屎嗎？沒辦法，可是事實上 Nagvigator 的安排就是這樣的。
Explorer 的新物件參照法--ID
Explorer 相較於 Navigator 是較晚近入瀏覽器市場的作品，在 Explorer 推出之前 Netscape 的 Navigator 所採用的網頁物件模組結構，早已成了 Web Page 設計人員 通用的標準。而微軟一向的軟體切入市場的戰略都是一方面相容所有目前風行軟體的 規格(尤其是它頭號的競爭對手 Netscape)，一方面就目前軟體功能不足部份提出自己 的新規格。因此就使用 NAME 屬性參照網頁物件的規格而言，它大部份把所有 Navigator 的舊規格通通繼承下來(包括我前面所提 Navigator 那些有點混亂的狀況) ，這意味著你從前怎麼用 Script 敘述參照 Navigator 物件的，現在可用同樣的方式 參照 Explorer 物件。另方面它用一種完全新規格的物件參照法，就是在 HTML 標籤裏 增加 ID 屬性，來做新型式的物件參照。ID 講得更白一點，就是物件惟一識別代碼， 也就是你一個網頁裏可以有好多個相同的 TagName 標籤，但每一個不同的 Tag ，必須 有一個惟一不同其他標籤的代碼。在屬性設定上，ID 屬性和 NAME 屬性設定完全沒有 差別，都是用字串來設定，如： 
    <IMG SRC="myhome.gif" NAME="n_home">
    <!-- 這是設定名稱屬性 -->

    <IMG SRC="myhome.gif" ID="i_home">
    <!-- 這是設定 ID 屬性 -->

    <IMG SRC="myhome.gif" NAME="n_home" ID="i_home">
    <!-- 這是同時設定名稱及 ID 屬性 -->
但在使用上，ID 和 NAME 屬性的參照方式卻有大不同如下述。
遵循階層和忽視階層
如前所述，Navigator 用名稱索引參照時，必須先要分辨物件是屬於 forms,links,anchors,applets,embeds,images 這些集合物件中的那一種，然後用 
    var objN=document.集合種類.物件名稱;
的方式，按其分類及階層撰寫參照敘述。但在 Explorer 中，既然要求你在給 ID 屬性時必須是全網頁惟一的識別，那就不該有一 ID 指兩物件的錯誤，所以不管你 標籤元件何類何層，通通是在 Script 敘述中直接指明 ID 即可操作。
部份物件和普遍物件
如前所述，在 Navigator 中只有屬於 forms,links,anchors... 等 這些集合物件中的標籤，才被物件化，可以加以動態改變。但 HTML 不屬於上列這些 集合的多了(如 <P>,<DIV>,<Hn>...)，Explorer 既然喊出凡標籤皆物件，那這些無法 被歸類到上述集合的標籤，自然無法用 NAME 屬性參照，所以一律用 ID 屬性來參照。
瀏覽器階層結構及網頁階層結構
最明顯的例子如下： 
    <FORM>
        <!-- 舊圖片為 somewhere.gif" -->
        <IMG SRC="somewhere.gif" NAME="somepic">

        <!-- 執行換新圖片之 Script -->
        <INPUT TYPE=BUTTON VALUE="changepic" onclick="javascript:ChangePicture(this.form)">
    </FORM>

    <SCRIPT LANGUAGE=JAVASCRIPT>
        function ChangePicture(form1)
        {
            //為 somepic 這個 IMG 換新的圖片
            form1.somepic.src="new.gif"
        }
    </SCRIPT>
這段網頁敘述，只能在 Explorer 下執行，在 Navigator 下卻是錯誤的，因為 Navigator 的物件階層結構是瀏覽器訂死的，image 物件就只會放在 document.images 集合中，它是不會管你網頁撰寫時，那個標籤是被那個標籤包覆的，所以縱使 somepic 在網頁中看起來是 FORM 標籤中的一個附屬標籤，但 Navigator 是不理會這種差別的。 所以 somepic 只會放在 document.images 下，不會放在 form1 之下，所以它的敘述 應該是： 
    <FORM>
        <IMG SRC="somewhere.gif" NAME="somepic">
        <INPUT TYPE=BUTTON VALUE="changepic" onclick="javascript:ChangePicture()">
    </FORM>

    <SCRIPT LANGUAGE=JAVASCRIPT>
        function ChangePicture()
        {
            document.images.somepic.src="new.gif"
        }
    </SCRIPT>
這第二段敘述在 Navigator 和 Explorer 都可順利執行。由此可知，Explorer 除了 承繼原有的瀏覽器物件階層結構外，還新增了網頁結構組成的物件階層結構，並且兩 種方法你都可使用。
Explorer 新的集合物件--all
你在 Explorer 官方參考文獻中一定會看到 Explorer 提出一個叫 all 的新集合物件 ，all 最簡單的解釋就是所有在 Explorer 中，可以用 Script 敘述參照的物件的總合 。幹嘛用，老實說我覺得這集合有些畫蛇添足，因為如果你熟知了上面所述的 NAME 參照、ID 參照、網頁階層結構參照，那麼 all 是多餘的。但如果你被這些參照弄昏了 ，那麼就用 all 參照吧。各物件在 all 集合中參照方式是：
  1. 沒有設定 ID 和 NAME 屬性的，用數字編號參照。
  2. 同時具備 ID 和 NAME 屬性的，兩者皆可用。
  3. 非 Navigator document 下屬集合物件的，只能用 ID 參照及數字編號 參照。
Explorer 參照的混亂
如果你看了諸種比較到這裡，你或許會說那 Explorer 功能比較好嘛。話雖如此，但 Explorer 物件參照的混亂，比 Navigator 有過之而無不及，中間充滿了太多的例外 狀況：
繼承了 Navigator 的混亂
Explorer 為了搶 Navigator 的市場，所以幾乎是原封不動的把 Navigator 的 NAME 屬性參照規格繼承下來，包括原有的混亂。 更有甚者，原來在 Navigator 中只有 link 物件無法用 NAME 參照， Explorer 連 anchor 一併都只能用數字索引參照。
Explorer 自己的混亂
如：
  1. 網頁階層結構破壞瀏覽器原有階層結構，如 image,input 等物件，如果獨立存在於 <BODY> 標籤之下，不被 其他標籤所包覆，可在 Script 敘述中以其 NAME 屬性呼叫 使用，但把它包覆到 <FORM> 標籤中後，就必須用 formname.objname 才能參照到，所以才有同樣的 Script 敘述 在不同網頁結構下有不同的結果。
  2. 就如同前面所述，一個物件分屬不同的集合後，造成回頭向上 參照的混亂，Explorer 在原 Navigator 中又加了 all 集合和 網頁階層結構，等於混亂程度加倍，甚至有無窮循環參照的可能 。
  3. 又如前述 anchor 和 link 物件，在其所屬集合中無法用 NAME 屬性參照，但很扯的是在 Explorer 中，你竟可用 NAME 而不加 任何上層物件來操作它，也就是說按階層結構無法 NAME 參照， 不按階層結構反而可以像 ID 一樣直接呼叫。而且只有它們可以 ，其他都不行。
  4. ......凡以上種種，無法一一列舉。
總之一句，Explorer 中的物件參照，充滿了許多特殊變通，無法一體適用，只有它 才能適用的方法。網頁設計者如果不察，我只能說你會被那些旁門左道害慘。
重覆的 NAME 與 ID
或許你會覺得這個問題無聊，或許你會覺得有趣，我只能說或許我好奇心太過，我做 過這樣的測試，在這裏把結果告訴大家。
那就是 NAME 和 ID 目的是在分別不同的 Tag 元件，所以不同的 Tag 要取不同的 NAME 或 ID ，但如果你真的故意或不小心為不同的 Tag 取了相同的 ID or NAME 時， 會發生什麼情況？
我的實驗結果是 Navigator 不管你同名的 Tag 有幾個，它只參照到最後一個，也就是 後來的幹掉前面的，一個 NAME 你只能參照到最後的那個 Tag。而 Explorer 的表現就 比較有趣了，那就是同樣的 ID or NAME 的 Tag 有兩個以上，那單純的 ID 和 NAME 參照不到任何 Tag ，程式會發生錯誤。必須要 ID or NAME 加上序列數字才行，如 idString[0],idstring[1]... or namestring[0],namestring[1]... 這樣才行。所以 Explorer 使用者如果苦查你的 Script 敘述沒有任何錯誤，但程式就是有錯，就查查 所有 Tag 標籤的 ID or NAME 是否有相同的設定吧。
最後的感想與建議
在目前各大瀏覽器廠商紛紛以自己獨特的新功能炫惑使用者時，其實最苦的是網頁 設計者，因為隨著新標準的提出，物件參照的方法勢必愈來愈複雜。而各瀏覽器 廠家對自己那個雜亂無章的物件倉庫，似乎總抱著非關緊要的態度，似乎是誰叫你 入這行，吃這飯的樣子。面對這樣的態勢，我不願再去做瀏覽器誰優誰劣的比較，因為 我的感覺是：都蠻劣的。在最後如果你仍希望寫出兩大瀏覽器通用的網頁，我給你的 建議如下：
  1. LANGUAGE 要用 JavaScript ，Navigator 不支援 VBScript ，這點好 像是廢話，大家早知道了。
  2. 先用 Navigator 測試你的網頁，如果 Navigator 能正確顯示，大體上 Explorer 都能正確顯示。
  3. Explorer 的 ID 屬性、all 集合物件、網頁階層結構，Navigator 都不 支援，不要使用。
  4. 明瞭 Navigator 的物件結構階層，按照完整而正統的方法去做名稱物件 參照，不要使用變通的取巧方法。
  5. 只有 document 所屬的集合物件 才是雙方通用的，或許這限制了你創意的發揮，但這是一個兩難抉擇， 效果與瀏覽人口，看誰輕誰重了。

回前頁

報告日期：2000.2.7
報告人：老怪

做好 <SCRIPT> 區段的收尾

標註標籤也會做怪(Navigator 4.5 中文版)
在撰寫 DHTML Script 區段時，為了與不支援 Script 的瀏覽器相容，我們通常會使用 標註標籤 <!-- --> 把 Script 區段包起來，如： 
    <SCRIPT LANGUAGE=JAVASCRIPT>
    <!--
    .................................
    ...... Script 的區段敘述 ........
    -->
    </SCRIPT>
這些標籤只是為其他瀏覽器而設，它本身在 Script 區段裏並沒有任何作用。如果你 真以為標註標籤不需去太理會，從不去管它寫的適當與否，那請看我下面親身的慘痛 經歷。
!!標註標籤竟會是 bug 來源!! 
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
var icon1=new Image();
icon1.src="hidup.gif";
var icon1a=new Image();
icon1a.src="hidon.gif";
var icon1b=new Image();
icon1b.src="hiddn.gif";

function MouseThrow(imgname,gifname)
{
    if (navigator.appVersion.substring(0,1) >= 4)
    {
        document.images[imgname].src=eval(gifname+".src");
    }
    else
    {
        alert("!!抱歉!!\n你必須使用 IE or NC 4.0 以上的瀏覽器");
    }
}
-->
</SCRIPT>
</HEAD>
<BODY>

<TABLE ALIGN=CENTER><TR>
    <TD>
    <A HREF="../../index.htm"
        onmouseout="MouseThrow('button1','icon1')"
        onmouseover="MouseThrow('button1','icon1a')"
        onmousedown="MouseThrow('button1','icon1b')">
    <IMG NAME="button1" SRC="hidup.gif" BORDER="0"></A>
    </TD>
</TR></TABLE>

</BODY>
</HTML>
上面的 Script 敘述目的很簡單，就是做一個圖形動態聯結鈕，當滑鼠移入時按鈕會 換圖，移出後按鈕回復原圖。單就 Script 來說，這段不管在 IE or NC 上都是正確 無誤的，在 IE 上也順利執行，但在 NC 4.5 上就是不行。我 debug 整整兩天，也 去網路上參考一堆別人的 Code ，但同樣的東西，我把它放入我的 Script 區段裏 就是不行。就在即將絕望放棄時，我瞄到別人的 Script Code 標註標籤的結尾是 // --> ，而不是我的 --> ，抱著姑且一試的心裡，我改了一下，結果哇洌還真 %#**@!， bug 就出在這兒。
安全的標註寫法
  1. 不要標註標籤，就不會起 bug。
  2. 如果還是要，開頭 <!-- 不變，結尾應該改為 // --> ， 而不是 -->，原因是 "--" 被 Script 解為變數減 1 ，有時就會有問題，所以為了保險，請不要忘了 "//"。
報告日期：2000.2.13
報告人：老怪

串接樣式表的特殊狀況

或許你會說串接樣式表 (Cascade Style Sheet--CSS) 不是 W3C 制定的共同標準嗎？ 為何還會有瀏覽器的差異？其實 W3C 的各項網路標準，只是提供出一個業界共同追求 標準，一切良法美意，還是要個別的網路軟體商用實際的軟體設計來加以實踐達成， 在各自發展下，多少大同小異，原也難免。下面就列出各家瀏覽器的小異現象。

CSS 的靜態與動態表現
CSS 的被提出主要是為了在不更動原網頁內容下，為網頁提供更豐富的顯示樣式。 所以 W3C 在制定時，可沒有規定它是必須靜態的，還是同時要具有動態的能力，這方面 她是保留給瀏覽器廠商自己去規劃設定。Microsoft Internet Explorer 4.0 以後的 版本，不但在 HTML 中，可以使用靜態的 CSS 設定，並且在 DHTML 規劃中，它不但 規劃了可 Script 操作的 style sheet 集合物件 (styleSheets) ，並且為每個 HTML tag 準備了一個 style 附屬物件，所以不管是整個 StyleSheet 的更換，抑或個別 tag 的 style 物件屬性改設，都具備動靜兩方面充足的能力。相較於此，Netscape Navigator 在 4 以後的各版，表現的就不是這麼支援充分。雖然在靜態 StyleSheet 上面或許和 IE 所差無幾，但在動態變更 Style 屬性上，雖然 Netscape 官方說法是 可用下面的語法來操作： 
<STYLE TYPE = "text/javascript">
    document.tags.P.fontSize = "18pt";		/* 設定 P tag 字型尺寸 */
    document.tags.P.marginLeft = "20pt";	/* 設定 P tag 左邊界 */
    document.tags.H1.color = "blue";		/* 設定 H1 tag 字型顏色 */
</STYLE>
但這只能在網頁初載入時做這樣的設定，一但網頁載入顯示後，這種語法就行不通了。 所以在 NS 4 的各版中，我們還是必須把它歸入無動態 CSS 能力的瀏覽器，至於 <STYLE TYPE = "text/javascript"> 的語法，其實和 dcoument.write('<TagName STYLE="CSS 的設定字串">') 實在沒有太大的分別。
字型大小設定必須有單位表示(測試瀏覽器 Navigator 4.5 中文版)
字型大小設定在 CSS 的屬性是 "font-size:字型大小數字;"，在大小設定後我們 可以給予不同的單位設定，如： 問題來了，如果我們只打了數目字，而沒有輸入單位字符，會發生什麼事呢？ IE 會把沒有輸入單位的數字當作是在設定 px 大小，也就是 px 是 IE 的預設單位。 那 NS 呢？可有點絕了，它根本就不理會了，也就是不管你數字多少，它一概還是維持 未設定狀態。不只如此，如果你的 Style 設定裏有 font-size 忘了打單位，它會把你 所有 color,background-color 等各種設定，都視為無效。所以如果你為一個 tag 設了 一堆 style 屬性後，卻發覺 NS 一點反應都沒有，請查查 font-size 後面是否忘了打 單位字符了，因為筆者被整過好多次。
Style 繼承原則的例外(測試瀏覽器 Navigator 4.5 中文版，Explorer 5.0 中文版)
CSS 的樣式使用，具有繼承的特性，就是一個子標籤的樣式會繼承使用父標籤的樣式，除非 子標籤自己有另外的樣式設定，但這個原則在 <P> 這個標籤可就例外了，不信你可以把下面 這段 HTML Code 貼到網頁裏試試： 
<P STYLE="font-size:36px;color:red;">
    這是父標籤自己的內容開始段......<BR>

    <I>這是斜體字設定區段</I>

    <P>這是子標籤區塊的區段</P>

    這是父標籤自己的內容結束段......
</P>
你會發覺在 P Tag 的包覆下，行內標籤 (in-line) <I> 會繼承父標籤 P Tag 的樣式，但是子標籤 如果是區塊標籤 (block) 如本例之 <P> 的話，所有樣式都無法繼承，甚至被破壞到連子標籤結束後 ，跟在子標籤後的 P Tag 內容都無法再有原設定樣式。有這種現象的只有 P Tag ，而且是兩家瀏覽器 有志一同，理由何在，到現在我還沒想通。
藏不起來的區段(測試瀏覽器 Navigator 4.5 中文版)
CSS 的 visibility 屬性是設定網頁標籤元件是否在網頁上為可見： 但在 NN 中，只有擬 LAYER 化的標籤( 擬 LAYER 化說明)，才能使 visibility 屬性生效，也就是說一定要有 CSS "position:relative;" or "position:absolute;" 設定，這個標籤元件才 hidden 的起來。
沒有辦法浮動的標籤(測試瀏覽器 Navigator 4.5 中文版)
  1. 不要在 FORM 標籤上設 position:absolute or position:relative，整個 FORM 表單會消失。
  2. 不要在 FORM 標籤內包含 position:absolute or position:relative 的區塊，因為在此區塊後 所有表單元件都會消失。
  3. IMAGE 標籤和 FORM 下屬的表單標籤設不設 position 屬性沒有影響，而且就算設了，也沒 辦法用 left 和 top 屬性指定新座標位置，反正它的 position 屬性永遠是 static ，沒辦法改的。
報告日期：2000.4.24
報告人：老怪

未完待續......

報告日期：
報告人：

Client 端 HTML 文件索引 回何處塵埃分類導覽

1