Div+Css網頁佈局學習中容易出現的問題匯總

應用Div+CSS網頁佈局，製作符合web標準的網站，容易出現的一些問題。

現在總結一下，以便大家能夠看到明白問題出在那裡。

一、CSS校驗的問題

我們設計的網頁，都希望符合XHTML標準，CSS通過W3C的校驗。 有些未通過CSS2.0校驗，主要校驗錯誤都是:「Line : 0 font-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:2 0px」可以簡寫為」padding:30px 0 10px 20px;」。 在定義技巧上有更多的節省技巧，隨著對CSS應用的熟練，你會不斷發現更好的辦法。

三、XHTML校驗的問題

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

◎target=」_blank」，這個語法在HTML4.0裡是正確的，在XHTML1.0裡是不允許使用的。 解決的辦法之一是寫成target=」new」，另外一個辦法是用js處理所有的target；

◎樣式表最好不要內嵌，將樣式表檔獨立出來易於維護。 如果內嵌style一定要寫成style type=」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背景為透明)：

<object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "HTTP://download.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="300" height="100"> <param name="quality" value="high "> <param name="wmode" value="transparent"> <param name="SRC" value="test.swf"> <embed src="test.swf " wmode="transparent" quality="high" pluginspage="HTTP://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>

但直接寫在XHTML中依然不可以，我們現在只能通過把上面代碼寫在flash.js檔裡，然後再調用來騙過校驗。

關於flash是否符合標準，是一個存在爭議的問題。

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

四、相容的問題

有些網站在IE6.0、Mozilla Firefox1.0、Opera 7.12中流覽發生變形和錯位。

在IE裡居中，但Mozilla裡沒有。 在IE中設置body {TEXT-ALIGN: center;} 就已經可以居中了，但在Mozilla中必須對需要居中的層再加入以下樣式設置：MARGIN-RIGHT: auto; MARGIN-LEFT: auto;

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

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