MozTW, Mozilla 台灣社群 | Firefox / Thunderbird 正體中文版

Mozilla@Taiwan

問題網頁與技術傳教 - [翻譯] Mozilla 網站設計常見問題

BobChao - 星期四二月 12, 2004 2:31 am
文章主題: [翻譯] Mozilla 網站設計常見問題

Mozilla 網站設計常見問題
原文: http://www.mozilla.org/docs/web-developer/faq.html

這份文件回答了一些與 Mozilla 相關的網頁設計常見問題，而文件最後也附上其他一般網頁常見問題的連結。

Q: 什麼是「Quirks」模式與標準模式？

A:
Mozilla 裡有「兩個半」的佈局模式，分別是「Quirks」、「近乎標準」及「標準」模式。在「標準」模式裡，Mozilla 的目標是將符合全球資訊網協會（World Wide Web Consortium，W3C）推薦書的網頁以推薦書中闡述的方式處理。而在以「與舊版回溯相容」為目標的「Quirks」模式中，Mozilla 會仿照過去瀏覽器的幾種行為來處理網頁，這可能會讓符合 W3C 推薦書的文件以不符規格的方式顯現。「近乎標準」模式則與「標準」模式非常相似，但因某些緣故（下一個問題會闡述）其將以傳統方式來描繪含有圖片的表格。佈局模式的挑選取決於 HTML 文件起始處 doctype 的宣告與否及宣告模式。

要確保 HTML 的「標準」模式啟動，最簡單的方法是使用這種 doctype 宣告：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

要確保 HTML 的「近乎標準」模式啟動，最簡單的方法是使用這種 doctype 宣告：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

兩種宣告中，前者是給不含任何宣告失效標籤的文件；後者則是給可能含有宣告失效標籤的文件。無論是何者，此文件都該合乎並通過 CSS2 佈局模組的驗證。

而要啟動 HTML 的「Quirks」模式，最簡單的方法是省略 doctype 宣告。但不管怎樣，我們並不鼓勵建立依賴 quirks 模式的文件。

「近乎標準」模式在 Mozilla 1.1 beta 及 Mozilla 1.0.1 中才出現的，在更早的版本中，現在以「近乎標準」模式佈局的文件會直接啟用「標準」模式。

這種依照 doctype 來辨別佈局模式的方法只適用於標為「text/html」的文件，而 XML 文件則必然會啟動「標準」佈局模式（標為「application/xhtml+xml」的文件亦同）。這代表一份符合 XHTML 1.0 Transitional 規格並標記為「text/html」的文件，會因附錄 C 的理由以「近乎標準」模式佈局；而同一份文件，標記為「application/xhtml+xml」後則會用應有的準則，以「標準」模式對待。

Q: 為什麼在「標準」模式下時，表格中的圖片邊緣會有間隔？

舊的瀏覽器與 CSS2 box layout model 兩者在「版面區塊的預設垂直尺寸」跟「圖片的預設垂直對齊方式」方面略有出入，而如果明確指定圖片的 CSS 屬性（加上圍繞圖片的<a>標籤）可以解決這種排版上的問題。

如果某個以「<td class="imgcell">」定義的表格儲存格內只有一個圖片，則所需的 CSS 定義便是:
.imgcell img, .imgcell a { display: block; }

更長的說明…

Q:我設定的樣式沒有用！為什麼會這樣？

以下是一份檢查清單：

驗證

語法檢查

所有非 0 的數字後面都該附加適當的單位，數字及單位之間不含空白字元（例：1.2em）。

屬性名稱及屬性值之間該放的是「冒號」而非「等號」。

.css 的檔案中不該出現任何 HTML 標籤（像是 <style>）。

font-face 並非 CSS 的屬性之一，正確的屬性名稱是「font-family」而 @font-fact 屬於 at-rule。

如果你使用了 @import，則應該將其置放在 CSS 檔案的最上頭。

「標準」佈局模式

Web sniffer

樣式類別（class）及 ID 名稱都有大小寫之別（case-sensitive）。

在 XML 中，element selector（譯註: Type selector）有大小寫之別。

樣式表的處理指令（processing instruction）只能出現於 XML 檔的前言（prolog）之中，另外它們也只能在 XML 檔案中使用，而不能用於標示為「text/html」的檔案。

寬（width）及高（height）不能套用在 inline 的元素上（如預設的 <span>）。（譯註：表示如果 <span> 的 display 設定為 block 則不在此限。）

「text-align: center;」是將某個區塊（block）內的 inline 內容置中，而不是（也不該是）用來將區塊本身置中的。要將區塊置中，可以將「margin-left」及「margin-right」屬性設定為 auto，並將「width」指定一數值、讓該區塊比其容器區塊（containing block）來得小即可。

當然也可能（雖然機會不大）是你碰上了程式錯誤，這裡有份加註 Mozilla 程式錯誤的 CSS1 規格書。

Q:圖層（Layer）沒用！為何會這樣？

<layer> 是個特有的擴充標籤，並非 HTML 規格的一份子。我們不支援 <layer> 標籤，請改用 <div> 標籤。

Q:JavaScript 沒用！為何會這樣？

有些 document 物件的屬性如 document.all 與 document.layers 並非 W3C DOM 標準的一份子。Mozilla 不支援它們，請改用 document.getElementById() 方法。

此外，某些老舊的瀏覽器偵測程式（client sniffer）會將新瀏覽器排除在外。公用 API（W3C DOM）的目的在於互通（interoperability），再額外偵測出不支援此公用 API 的特定瀏覽器。當使用 DOM 時，最好先檢查一下你想用的物件及方法。舉例而言，你可以用如下方式檢查瀏覽器是否支援 document.getElementById()：

代碼:

if(document.getElementById) {
/* 在此放置支援 document.getElementById() 時所要執行的�{式碼 */
}

Q:為何 Mozilla 不將我設定的 alt 屬性顯示為工具提示（tooltips）？

alt 屬性的本意不是拿來作為「工具提示」的，其用意是做為「替代文字」、在圖片無法顯示時才取而代之。眾多 Windows 平台上瀏覽器的做法反而背道而馳。

Mozilla 並不將 alt 屬性顯示為工具提示，因為如此一來是變相鼓勵網頁作者誤用屬性。

一旦將替代文字顯示為工具提示，網頁作者就可能寫出不良的替代文字，因為他們會將其視為輔助的工具提示，而非「圖片的替代品」。（「不良」指的是在圖片無法顯示時，文字涵義不足以替代圖片的情形。）

一旦將替代文字顯示為工具提示，有些作者就不會想要寫替代文字了，因為他們不想要顯示工具提示。（如此一來，無緣得見圖片的參觀者就越發難懂網頁的意思了。）

有另外一種屬性可以讓 Mozilla 將其顯示為工具提示：「title」。事實上，在 HTML 4.01 規格書中建議可讓 title 屬性顯示為工具提示。不過當然這種建議不見得必為所有瀏覽器採納，例如有些瀏覽器就將 title 屬性顯示在狀態列中。

此時或許有些人會在討論區或 Bugzilla 中貼篇「不過 IE...」的文章，但請注意：即便是 Mac 版的 IE 5 在遇到 alt 及 title 屬性時，處理方式也與 Mozilla 相同；另外，Windows 版的 IE 也可以將 title 屬性顯示為工具提示。

Q: 為什麼我不能在 XML 文件中使用 HTML？

只有使用了正確命名空間（namespace）的元素才能被視為 XHTML 標籤。XHTML 的正確命名空間 URI 為「http://www.w3.org/1999/xhtml」，並非 HTML 4.0 規格書的 URL。此外，所有的 XHTML 元素及屬性皆必須為小寫。

Q: Mozilla 是否支援動態下載的字形？

Mozilla 不支援動態下載字形。

動態下載字形通常被用來作為過去瀏覽器支援不足情形下的補救措施。這些網站（例如某些印度網站）將文字以某種拉丁語調編寫，然後讓瀏覽器用某種字體使那些文字看起來像是梵文，那些語調加上字型之後就成了某種人類可讀的語言。同樣的做法也常在希臘文字及數學符號的情形下發生。

顯然，當了解 Unicode 的瀏覽器面世時，「某種拉丁語調」轉換後依舊只能是「某種拉丁語調」（從 Unicode 的觀點來看，原來書寫時是什麼顯示出來就是什麼）。所以與其支援動態下載的字型，Mozilla 選擇將焦點放在背後真正的問題上：擴大 Unicode 的支援範圍。

不過，在某些平台上的印度語至今仍有些許問題。舉例來說 Mac OS X 上的 Mozilla 不使用系統上的梵文字體，卻可使用協力廠商的字體（如 TITUS Cyberbit）。

Mozilla 在 Unicode 的支援上已經費了很大的工夫。支援動態下載字型勢必得再花費大量心力，亦有可能受到重重專利權問題的阻礙，但即便成功效果也有限。因此，對於非 ISO-8859-1 的字元集 Mozilla 提供了 Unicode 的支援，比個別網站分開下載字型還更為符合需求。

Q: Mozilla 支援 XSL 嗎？

Mozilla 支援 XSLT，但不支援 XSL-FO。

Mozilla 的佈局引擎是為 CSS 格式模型所設計的。CSS 非常適合用以在互動程式中為結構式 HTML 或類似語言套用樣式，不需知曉輸出裝置的真實屬性。也就是說，CSS 適合在網頁瀏覽器上運作。

引言回覆:

Bob: 下面這個翻得有點心虛, 有什麼錯誤麻煩一定要告訴我... @_@...

Q:為什麼我的網頁在 Mozilla 上看起來不如我所想？我的網頁的確不合標準，但好的瀏覽器應該要如作者所想般顯示網頁！

網頁作者們該以網站標準傳達心中所想，否則便需人類般的心智能力，才能猜測每個作者的想法、找出其意圖－這在軟體中辦不到。即使有人類能推斷他人意圖，在軟體中要做到如此境界必然也會異常緩慢且錯誤連連。

一般常見的爭論不做他想：「Mozilla 應該要能夠跟某 x 瀏覽器一樣如何如何...」（其中的 x 是該使用者最喜歡的「非」Mozilla 瀏覽器），但要在各方面都做得跟某 x 瀏覽器一樣並非如此容易，即使是看起來簡單至極的動作也可能有很大的難度。

不同的人都有不同的那個「 x」，而第二個問題是網站作者在偏離標準的方式上實在五花八門，太有創造力了。事實上由於網頁的長度無所現制，所以偏離標準方式的數量也從來沒有上限。所以，要去測試 Mozilla 是否能與其它「x」瀏覽器在各方面皆完全相同，實在是強人所難。（同樣的，標準之間相結合所產生的功能數量也從來沒有上限，這讓軟體品質管制上多了一層挑戰。）

況且，「x」瀏覽器在面對不符規格的輸入時所產生的反應也並非總在意料之中，有些情況的反應是源於複雜程式裡出乎意料的交互作用。就算你能修改「x」瀏覽器的原始碼，也無法擔保不會引發更多程式交互上的意外。

其他常見的爭論是要求 Mozilla 只要在某種特定情況下的行為跟「x」瀏覽器一樣就好，但事實常常證明 Mozilla 早就是那樣做了。Mozilla 的「標準」模式顯然已與其他遵照相同規格、正確實做的瀏覽器行為一致。另一方面，Mozilla 的 quirks 模式也已能接納一般舊瀏覽器能支援的非標準程式。

與其花時間精力去做反向工程來複製一個某瀏覽器的分身，向標準看齊才是更有意義的舉動。（他人訂立的）標準可以確保交互流通，比連錯誤都一起複製過來的瀏覽器分身好多了。

Q: 我找不到我要的答案，該去哪裡詢問呢？

試著在與你問題相關的 comp.infosystems.www.authoring.* 新聞群組中發問，如果你的問題與 JavaScript/ECMAScript 或 DOM 相關，可於 comp.lang.javascript 中發問（當然，請記得先閱讀該群組的常見問題集）。請勿於 Mozilla 開發新聞群組中張貼網頁設計的相關問題。

* comp.infosystems.www.authoring.html Web Authoring FAQ
* comp.infosystems.www.authoring.stylesheets FAQ
* ciwas stylesheet authoring FAQ
* comp.lang.javascript FAQ

作者:Henri Sivonen (原文有email地址, 請不要寄信問網頁設計的問題)
翻譯: Bob Chao

===
2004/3/18, 修正一句：否則便需人類般的心智能力，才能猜測每個作者的想法、找出其意圖
thx lockchou

MozTW 正體中文在地化