應用div+css網(wǎng)頁布局，制作符合web標準的網(wǎng)站，容易出現(xiàn)的一些問題。

現(xiàn)在總結(jié)一下，以便大家能夠看到明白問題出在那里。

一、css校驗的問題

我們設(shè)計的網(wǎng)頁，都希望符合xhtml標準，css通過w3c的校驗。有些未通過css2.0校驗，主要校驗錯誤都是:“line : 0 font-family: 建議你指定一個種類族科作為最后的選擇”

w3c建議字體定義的時候，最后以一個類別的字體結(jié)束，而不要以單獨某個字體結(jié)束。例如"sans-serif"就可以保證在不同操作系統(tǒng)下，網(wǎng)頁字體都能被顯示。

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

二、css的書寫建議

給css文件加注釋。注釋會為你今后的維護帶來方便，建議盡可能給css文件加注釋，不要擔心增加少量的字節(jié)。盡量簡寫css語法。比如顏色值"#ffffff"可以簡寫成"#fff";"padding-top:30px;padding-right:0;padding-bottom:10px;padding-left:2 0px"可以簡寫為"padding:30px 0 10px 20px;"。在定義技巧上有更多的節(jié)省技巧，隨著對css應用的熟練，你會不斷發(fā)現(xiàn)更好的辦法。

三、xhtml校驗的問題

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

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

◎樣式表最好不要內(nèi)嵌，將樣式表文件獨立出來易于維護。如果內(nèi)嵌<style>一定要寫成<style type="text/css">，其中的type不能忽略，否則xhtml無法判斷你的style作用在什么方面。

◎<br>必須寫成<br />，xhtml要求所有的標簽必須關(guān)閉，不成對的標簽直接在后面加" /"。

◎重復使用同一id。一個id在xhtml中只能使用1次，如果需要多次引用樣式，應該使用class。

◎flash的嵌入方法錯誤。<embed>最早是netscape的私有標簽，即使后來為ie所支持，但始終沒有被w3c承認，在html4.0沒有<embed>這個標簽。w3c主張的是采用<object>標簽。為了解決不同瀏覽器的兼容，有一個變通的解決方法是2個標簽都采用。

完整的示例代碼如下(flash背景為透明)：

以下為引用的內(nèi)容：
<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中依然不可以，我們現(xiàn)在只能通過把上面代碼寫在flash.js文件里，然后再調(diào)用來騙過校驗。

<script type="text/javascript" src="flash.js"></script>

關(guān)于flash是否符合標準，是一個存在爭議的問題。

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

四、兼容的問題

有些網(wǎng)站在ie6.0、mozilla firefox1.0、opera 7.12中瀏覽發(fā)生變形和錯位。

在ie里居中，但mozilla里沒有。在ie中設(shè)置body {text-align: center;}就已經(jīng)可以居中了，但在mozilla中必須對需要居中的層再加入以下樣式設(shè)置：margin-right: auto;margin-left: auto;

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

web標準和css布局已經(jīng)被越來越多的設(shè)計師了解和掌握。css布局經(jīng)過一段時間的消化理解和應用，會有更多技術(shù)美觀兼顧的網(wǎng)頁涌現(xiàn)。