RELATEED CONSULTING
相關咨詢
選擇下列産品馬上(shàng)在線溝通(tōng)
服務時(shí)間(jiān):9:00-18:00
你(nǐ)可(kě)能遇到了下面的問題
關閉右側工具欄
DIV+CSS網頁布局中CSS無效的十個(gè)常見原因
  • 作(zuò)者:admin
  • 發表時(shí)間(jiān):2013-07-02 14:17:30
  • 來(lái)源:未知

當我們把做(zuò)好的頁面通(tōng)過W3C validation驗證時(shí),驗證程序抛出大(dà)量差錯和(hé)警告,說明(míng)你(nǐ)的XHTML尚未完善,可(kě)能無法在不同浏覽器(qì)上(shàng)保持一緻功能。下面十個(gè)細微的失效問題難住了大(dà)批程序員,本文就告訴你(nǐ)如何解決。

在本文開(kāi)始前介紹一些(xiē)使用W3C驗證程序時(shí)需要注意的問題。

1、不要擔心驗證程序的警告:如果驗證程序說發現12處錯誤以及83處警告,不要理(lǐ)它,繼續進行(xíng)下一步。   

2、一次更正一個(gè)錯誤:按順序進展工作(zuò),從上(shàng)到下,一次修正一個(gè)錯誤。HTML用浏覽器(qì)從上(shàng)到下浏覽,這些(xiē)錯誤也是按同樣順序顯示。   

3、每次修正代碼後要刷新代碼,使它們重新生(shēng)效:一個(gè)小(xiǎo)錯誤常常會(huì)引發之後整頁的連串錯誤。因此如果操作(zuò)不當,“修正錯誤”也可(kě)能引發更多(duō)錯誤。每次修正後使代碼重新生(shēng)效,這樣就可(kě)以确保完全解決問題。  

知道(dào)了上(shàng)面這些(xiē)基本的異常情況,下面我們就來(lái)看看版面設計(jì)無效的幾個(gè)原因。

一、div 标簽未關閉

這是版面設計(jì)失效的最常見原因之一。當我們了解到這是多(duō)少(shǎo)精緻的版塊設計(jì)失效的罪魁禍首時(shí),總會(huì)大(dà)吃(chī)一驚。開(kāi)啓的div标簽是最普遍的版塊設計(jì)失誤之一,也是最難診斷的失誤之一。驗證程序有(yǒu)時(shí)會(huì)指向錯誤的開(kāi)啓div标簽,診斷時(shí)就像大(dà)海撈針一樣麻煩。   

二、麻煩的embed标簽

九十年代早期,Microsoft和(hé)Netscape的浏覽器(qì)開(kāi)始能夠辨認非标準的獨有(yǒu)字體(tǐ)。遺憾的是這意味着W3C驗證程序還(hái)不能識别某些(xiē)關鍵HTML 标簽,如“embed”,即使這些(xiē)标簽已經被廣泛使用。如果确實希望得(de)到嚴格的DOCTYPE(文檔類型)驗證,就隻能放棄嵌套。  

如果同時(shí)想要生(shēng)效的版面設計(jì)和(hé)嵌入式媒體(tǐ),可(kě)以試試Flash Satay方法。   

三、不當的DOCTYPE聲明(míng)

不聲明(míng)DOCTYPE,或者在文件開(kāi)始錯誤聲明(míng)DOCTYPE,也是一個(gè)常見錯誤。根據一般經驗,Strict DOCTYPE是大(dà)家(jiā)追求的最高(gāo)級驗證。Strict validation表明(míng)你(nǐ)的網頁能夠在所有(yǒu)浏覽器(qì)上(shàng)都得(de)到最佳展示。關于DTD文檔類型的聲明(míng),您可(kě)以參考52CSS.com的相關文章。   

四、結尾斜線

如果你(nǐ)的網站(zhàn)不能驗證,很(hěn)有(yǒu)可(kě)能是在代碼的某個(gè)地方漏寫了結尾斜線。我們很(hěn)容易忽略結尾斜線之類的東西,特别是在image标簽等元素中。  在嚴格的DOCTYPE中這是無效的。要在img标簽結尾處加上(shàng)“/”以解決此問題。   

五、Align标簽

如果DOCTYPE被設為(wèi)Transitional,你(nǐ)就會(huì)使用“align”标簽,但(dàn)如果要求更高(gāo)一點希望得(de)到Strict驗證,你(nǐ)會(huì)看到很(hěn)多(duō)錯誤。 Align是另一個(gè)不可(kě)用于版面設計(jì)的标簽。可(kě)以嘗試用“float”或者“text-align”來(lái)代替align轉換元素。

六、JavaScript

如果已經聲明(míng)Strict DOCTYPE,就需要在JavaScript中覆蓋CDATA标簽。驗證程序的這一方面難倒了很(hěn)多(duō)程序員,因為(wèi)網站(zhàn)傾向于為(wèi)廣告和(hé)追蹤腳本使用嵌入的 JavaScript。

七、圖像需要“alt”屬性

你(nǐ)可(kě)能還(hái)沒有(yǒu)注意到,圖像也是高(gāo)級驗證的潛在絆腳石。除了結尾斜線,高(gāo)級驗證也要求用alt标簽來(lái)描述圖像,如alt= ”Scary vampire picture”。  搜索引擎也靠alt标簽來(lái)識别網頁上(shàng)的圖像,所以無論怎樣加上(shàng)alt标簽總是好的。

八、未知實體(tǐ)數(shù)據

實體(tǐ)數(shù)據是又一個(gè)影(yǐng)響驗證的易犯錯誤。我們可(kě)以考慮用适當的編碼字符來(lái)代替“&”等符号。entire list中列出在XHTML版塊設計(jì)中可(kě)用的适當的編碼字符實體(tǐ)數(shù)據。

九、不良嵌套

嵌套就是元素裏又包括元素,我們容易混淆嵌套元素的順序。例如在div标簽前啓動strong标簽,但(dàn)又先關閉div标簽。這可(kě)能不會(huì)改變版塊布局,但(dàn)卻會(huì)使你(nǐ)的版塊設計(jì)失效。

十、缺少(shǎo)“title”标簽

盡管這看上(shàng)去是一個(gè)很(hěn)明(míng)顯的錯誤,很(hěn)多(duō)程序員(包括我自己)還(hái)是經常會(huì)在“head”版塊中遺漏title标簽。當你(nǐ)看到“missing a required sub-element of HEAD”(缺少(shǎo)HEAD的必要子元素)時(shí),才會(huì)發現自己忘記添加title标簽了。