關于這篇文章其實早就想寫了，隻是由于自己太懶才一直拖到現在。主要想談談在網頁制(zhì)作(zuò)中幾個(gè)比較容易被忽視(shì)的問題，算(suàn)不上(shàng)什麽高(gāo)深的教程，隻是自己平時(shí)工作(zuò)學習中所遇到的問題積累，寫下來(lái)一是可(kě)以給初學者提個(gè)醒，二來(lái)也是幫自己做(zuò)個(gè)筆錄，畢竟年紀大(dà)了，記性不好了...

 

　　這個(gè)問題其實被很(hěn)多(duō)人(rén)忽略，小(xiǎo)到個(gè)人(rén)站(zhàn)點，大(dà)到門(mén)戶網站(zhàn)都有(yǒu)可(kě)能犯這個(gè)錯誤。不信想想看，如果你(nǐ)所做(zuò)的網站(zhàn)背景是白色的，那(nà)麽你(nǐ)還(hái)會(huì)記得(de)在 CSS 裏寫下 Background-color:#ffffff 這句代碼嗎?我敢打賭，大(dà)部分人(rén)不會(huì)!并不是因為(wèi)大(dà)家(jiā)偷懶，而是這個(gè)舉手之勞被徹底忽略了，為(wèi)什麽?因為(wèi)我們所用的Windows 操作(zuò)系統在大(dà)多(duō)數(shù)的情況下，運行(xíng)在其上(shàng)的各種軟件的默認背景色是白色，這其中就包括 IE 浏覽器(qì)，所以在網站(zhàn)背景是白色的條件下，許多(duō)的網頁制(zhì)作(zuò)者就想當然的忽略了關于背景色的設置，反正大(dà)家(jiā)都是白色，不設的話(huà)也看不出來(lái)。但(dàn)是不要忘記了，Windows 從 XP 開(kāi)始支持系統主題的更換，有(yǒu)很(hěn)多(duō)第三方的主題會(huì)更改系統默認的設置，其中就包括背景色的設置，如果沒有(yǒu)強制(zhì)設定頁面中的背景色，那(nà)麽頁面就會(huì)以當前浏覽器(qì)的背景色來(lái)顯示內(nèi)容，其結果就是網站(zhàn)美觀性被大(dà)大(dà)的降低(dī)，拿(ná)大(dà)家(jiā)都熟悉的網易來(lái)舉例，下面的截圖是在我機子上(shàng)浏覽時(shí)的樣子，由于前不久換了一套 Vista 的主題風格，所以浏覽器(qì)的背景色變成了淺灰色。

　　仔細看看網易的 Logo ，看出來(lái)嗎?對，那(nà)個(gè) Logo 的背景是白色的，但(dàn)旁邊的背景色卻是灰色的，換句話(huà)說就是網易整個(gè)頁面的背景原定就是白色的，這在浏覽器(qì)背景為(wèi)白色的前提下是看不出什麽來(lái)的，但(dàn)是像現在這樣就“漏餡”了。不光是網易，許多(duō)的門(mén)戶站(zhàn)都是這樣，具體(tǐ)我就不去舉例了，可(kě)見關于 Background-color 設定的重要性。所以，不論你(nǐ)的網站(zhàn)是什麽樣的背景色，請(qǐng)一點記住把它設定好，哪怕它是白色!

 

　　大(dà)家(jiā)都知道(dào) Table 的默認水(shuǐ)平對齊方式(align)為(wèi)左對齊，設align="left" 和(hé)不設其效果是一樣的，于是很(hěn)多(duō)人(rén)不去設置這個(gè)屬性，我以前也是如此。但(dàn)是在某些(xiē)特殊的情況下，IE 會(huì)把默認的左對齊理(lǐ)解為(wèi)居中對齊，從而導緻頁面的排版出現問題，雖然說具體(tǐ)是什麽情況下會(huì)出問題連我自己都說不清楚，但(dàn)是這種情況絕對存在，所以大(dà)家(jiā)在做(zuò)頁面的時(shí)候一定要習慣性的設置表格的 align 屬性，不要偷懶跳(tiào)過這步，對頁面的表現來(lái)說，這所謂的多(duō)此一舉絕對有(yǒu)益無害。

 

　　不知你(nǐ)有(yǒu)沒有(yǒu)遇見過這種情況，假設當你(nǐ)給一個(gè)單元格的 align 設置了左對齊後，卻發現放在單元格中的文字并沒有(yǒu)應用該屬性的效果，反而繼續是居中顯示，查看文字兩端也并沒有(yǒu)發現任何垃圾代碼包含其中，可(kě)是無論如何都改變不了文字的位置。郁悶嗎?反正當時(shí)我是很(hěn)郁悶，直到後來(lái)，我才發現原來(lái)是單元格的 Width 屬性在作(zuò)怪，将其删除或重新設置後問題得(de)到解決，所以，當你(nǐ)也遇到同樣的問題時(shí)，不妨檢查一下出問題單元格的 Width 設置，相信你(nǐ)會(huì)找到解決的方法。

 

　　有(yǒu)時(shí)為(wèi)了一些(xiē)個(gè)性化的需要，有(yǒu)些(xiē)人(rén)喜歡将浏覽器(qì)的滾動條隐藏掉，這個(gè)效果做(zuò)起來(lái)很(hěn)容易，但(dàn)是有(yǒu)時(shí)會(huì)發現明(míng)明(míng)代碼一點問題沒有(yǒu)，而且查看用的浏覽器(qì)也不是非 IE 內(nèi)核型的，但(dàn)可(kě)惡的滾動條就是不消失!而且這個(gè)問題很(hěn)多(duō)都出現在用 DW 等可(kě)視(shì)化編輯軟件制(zhì)作(zuò)出的網頁上(shàng)。那(nà)原因是什麽呢?其實原因就在該頁面的頭部代碼裏，查看該頁面的源代碼，你(nǐ)會(huì)發現在最上(shàng)邊有(yǒu)類似這樣的兩句代碼：這兩句代碼叫做(zuò) DOCTYPE 聲明(míng)，是 Document Type(文檔類型)的簡寫，用來(lái)說明(míng)你(nǐ)用的 XHTML 或者 HTML 是什麽版本。簡單點說這兩句代碼是制(zhì)作(zuò)标準化頁面所必不可(kě)少(shǎo)的關鍵組成部分，浏覽器(qì)就是根據你(nǐ)定義的文檔類型來(lái)解釋你(nǐ)頁面的标識，并展現出來(lái)的。換句話(huà)說，如果你(nǐ)定義了一個(gè)錯誤的 DOCTYPE，那(nà)麽你(nǐ)的标識和(hé) CSS 都不會(huì)生(shēng)效。而定義滾動條顯示與否的 overflow、overflow-x、overflow-y 這三個(gè)屬性恰恰沒有(yǒu)被網頁标準所采納，所以如果你(nǐ)的頁面上(shàng)方定義過 DOCTYPE ，那(nà)麽這三個(gè)屬性便是無效代碼了，解決方法就是删除頭部的 DOCTYPE 聲明(míng)，雖然在标準日益普及的今天不推薦這麽做(zuò)。

 

　　為(wèi)代碼寫注釋是個(gè)好習慣，但(dàn)是有(yǒu)時(shí)也會(huì)出現一些(xiē)問題，例如為(wèi) CSS 寫中文注釋。 如果你(nǐ)為(wèi)自己定義的 CSS 寫了中文注釋，那(nà)麽在一些(xiē)特殊情況下(例如服務器(qì)端的支持，頁面所用的程序類型等)會(huì)導緻部分代碼無故失效，這種情況我遇見好幾回了，所以在技(jì)術(shù)上(shàng)沒解決這個(gè)問題之前，還(hái)是不要為(wèi) CSS 寫注釋的好，養成良好的命名習慣足以讓其它人(rén)看懂自己代碼的意義，即使一定要寫，也請(qǐng)用英文寫吧(ba)...什麽?拼音(yīn)!!!拜托，你(nǐ)用拼音(yīn)試試看，保證一個(gè)星期後連你(nǐ)自己都不明(míng)白那(nà)寫的是什麽。

 

　　這個(gè)問題有(yǒu)些(xiē)濫竽充數(shù)的嫌疑，隻是有(yǒu)很(hěn)多(duō)人(rén)問起過，所以也一并放上(shàng)來(lái)。是關于 CSS 的 Glow Filters ，這個(gè)濾鏡的效果是對環繞對象內(nèi)容邊緣制(zhì)作(zuò)發光效果，也有(yǒu)人(rén)稱描邊效果，多(duō)被用在文字的表現上(shàng)，但(dàn)是許多(duō)人(rén)在運用了該濾鏡後發現并沒有(yǒu)出現想要的效果，究其原因多(duō)半是由于把這個(gè)濾鏡直接運用到了文字上(shàng)，要知道(dào)該濾鏡對文字是沒有(yǒu)效果的，那(nà)為(wèi)什麽還(hái)能制(zhì)作(zuò)出發光文字呢?那(nà)是因為(wèi)一定要把它運用在放置文字的容器(qì)上(shàng)，例如 Table 。所以，如果沒有(yǒu)效果的話(huà)，就檢查一下是不是用錯地方了。

　　該濾鏡的另外一個(gè)問題是，雖然發光效果是有(yǒu)了，但(dàn)是感覺文字上(shàng)的那(nà)圈光暈好像是被裁了一樣，少(shǎo)了一塊似的。這是由于所放置文字的容器(qì)高(gāo)度低(dī)于該濾鏡的發光範圍所至，解決方法有(yǒu)三種：

　　1、縮小(xiǎo) Font-Size

　　2、增加 Height 值高(gāo)度

　　3、降低(dī) Strength 值的大(dà)小(xiǎo)

 

　　其實這些(xiē)問題都不是什麽了不起的大(dà)問題，但(dàn)往往越是小(xiǎo)問題才越容易被人(rén)忽略，希望上(shàng)面這些(xiē)經驗教訓對你(nǐ)能有(yǒu)所幫助，哪怕有(yǒu)一個(gè)人(rén)從中收益就不枉我羅哩羅嗦這麽半天了。