DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> Div+CSS網頁布局實現Web標准時遇到問題及解決方案
Div+CSS網頁布局實現Web標准時遇到問題及解決方案
編輯:CSS詳解     

本文向大家介紹一下應用Div+CSS網頁布局,制作符合web標准的網站時,出現的一些問題及解決方法,希望對你的學習有所幫助。

Div+CSS網頁布局、web標准應用容易出現的問題匯總

應用Div+CSS網頁布局,制作符合web標准的網站時,容易出現的一些問題。現在總結一下,以便大家能夠看到明白問題出在那裡。

一.CSS校驗的問題

我們設計的網頁,都希望符合XHtml標准,CSS通過W3C的校驗。有些未通過CSS2.0校驗,主要校驗錯誤都是:“Line:0font-family:建議你指定一個種類族科作為最後的選擇”
W3C建議字體定義的時候,最後以一個類別的字體結束,而不要以單獨某個字體結束。例如"sans-serif"就可以保證在不同操作系統下,網頁字體都能被顯示。

雖然多數人都在body標簽上定義了"sans-serif",但在其它的id或class中再次定義字體時漏了sans-serif,被認為校驗不通過。這個錯誤不是很嚴重,只要稍加注意就可以避免。

二.CSS的書寫建議

給CSS文件加注釋。注釋會為你今後的維護帶來方便,建議盡可能給CSS文件加注釋,不要擔心增加少量的字節。盡量簡寫CSS語法。比如顏色值"#FFFFFF"可以簡寫成"#FFF";"padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:20px"可以簡寫為"padding:30px010px20px;"。在定義技巧上有更多的節省技巧,隨著對CSS應用的熟練,你會不斷發現更好的辦法。

三.XHtml校驗的問題

往往大家對CSS的校驗比較注意,但在XHtml符合標准方面有點忽視,出現很多低級錯誤。主要問題羅列如下:

◆target="_blank",這個語法在HTML4.0裡是正確的,在XHtml1.0裡是不允許使用的。解決的辦法之一是寫成target="new",另外一個辦法是用JS處理所有的target;

◆樣式表最好不要內嵌,將樣式表文件獨立出來易於維護。如果內嵌<style>一定要寫成<styletype="text/CSS">,其中的type不能忽略,否則XHtml無法判斷你的style作用在什麼方面。

◆<br>必須寫成<br/>,XHtml要求所有的標簽必須關閉,不成對的標簽直接在後面加"/"。

◆重復使用同一ID。一個ID在XHtml中只能使用1次,如果需要多次引用樣式,應該使用class。

◆Flash的嵌入方法錯誤。<embed>最早是Netscape的私有標簽,即使後來為IE所支持,但始終沒有被W3C承認,在Html4.0沒有<embed>這個標簽。W3C主張的是采用<object>標簽。為了解決不同浏覽器的兼容,有一個變通的解決方法是2個標簽都采用。
完整的示例代碼如下(Flash背景為透明):

ExampleSourceCode

  1. <object
  2. classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"codebase=
  3. "http://download.Macromedia.com/pub/shockwave/cabs/flash/swFlash.cab#version=5,0,0,0"
  4. width="300"height="100">
  5. <paramnameparamname="quality"value="high">
  6. <paramnameparamname="wmode"value="transparent">
  7. <paramnameparamname="SRC"value="test.swf">
  8. <embedsrcembedsrc="test.swf"wmode="transparent"quality="high"
  9. pluginspage="
  10. http://www.Macromedia.com/shockwave/download/index.CGI?P1_Prod_Version=ShockwaveFlash"
  11. type="application/x-shockwave-Flash"width="300"height="100">
  12. </embed>
  13. </object>

但直接寫在XHtml中依然不可以,我們現在只能通過把上面代碼寫在Flash.JS文件裡,然後再調用來騙過校驗。
<scripttype="text/Javascript"src="Flash.JS"></script>
關於Flash是否符合標准,是一個存在爭議的問題。

◆類似id=headerclass=title代碼都應該寫成id="header"class="title"。給屬性值加引號是最XHtml基本的語法規則。

四.兼容的問題

有些網站在IE6.0、MozillaFirefox1.0、Opera7.12中浏覽發生變形和錯位。
在IE裡居中,但Mozilla裡沒有。在IE中設置body{TEXT-ALIGN:center;}就已經可以居中了,但在Mozilla中必須對需要居中的層再加入以下樣式設置:MARGIN-RIGHT:auto;MARGIN-LEFT:auto;

超出寬度。在Mozilla裡看正常的頁面,在IE裡因為超出寬度而變形,並排的層移到下面去了。這個情況是因為IE和Mozilla對盒模型解釋不同造成的,有很多解決辦法,比如"!important"方法。

web標准和CSS布局已經被越來越多的設計師了解和掌握。CSS布局經過一段時間的消化理解和應用,會有更多技術美觀兼顧的網頁湧現。

【編輯推薦】

  1. CSS中Position屬性用法及作用
  2. 詳解CSS中padding-bottom屬性用法
  3. 探究IE和Firefox下的2款HTTP調試工具用法
  4. CSS教程:詳解margin和padding屬性應用場合
  5. 實現IE6、IE7、IE8多版本浏覽器共存的五種方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved