時(shí)間：2015-06-28 00:00:00 來(lái)源：IT貓撲網(wǎng) 作者：網(wǎng)管聯(lián)盟 我要評(píng)論(0)
在進(jìn)行CSS網(wǎng)頁(yè)布局開(kāi)發(fā)時(shí)，您肯定遇到過(guò)形形色色的布局問(wèn)題，雖然有大量的教程提供幫助，但最后可能被搞得焦頭爛額。本文的目的是讓您的設(shè)計(jì)過(guò)程更為容易，當(dāng)您遇到困難時(shí)為您提供快速參考。?
一、有疑問(wèn)，先驗(yàn)證?
在調(diào)試時(shí)，先對(duì)您的代碼進(jìn)行驗(yàn)證往往能省去不少麻煩事。格式不正確的XHTML/CSS?會(huì)導(dǎo)致許多布局上的錯(cuò)誤。
在其他瀏覽器中進(jìn)行測(cè)試之前，請(qǐng)先在最先進(jìn)的瀏覽器中撰寫(xiě)和測(cè)試CSS代碼，而不是相反。
如果您在破舊的瀏覽器中編寫(xiě)和測(cè)試，你的代碼就不得不依賴那個(gè)破舊瀏覽器的糟糕的顯示，然后在符合標(biāo)準(zhǔn)的瀏覽器中進(jìn)行測(cè)試，看到顯示結(jié)果"不正常"?時(shí)，你會(huì)很沮喪的。相反，您應(yīng)該先將您的代碼完善，然后再設(shè)法為較低級(jí)的瀏覽器打算。這樣從一開(kāi)始您的代碼就是符合標(biāo)準(zhǔn)的，你不必再為支持其他瀏覽器而勞心費(fèi)神。當(dāng)然了，目前遵從標(biāo)準(zhǔn)的瀏覽器無(wú)疑就是?Mozilla，?Safari?或?Opera。
二、確保您期望的效果確實(shí)存在?
許多特定的瀏覽器專(zhuān)有的CSS擴(kuò)展在正式標(biāo)準(zhǔn)中并不存在。?如果您對(duì)?filter（濾鏡）或滾動(dòng)條指定了樣式，那么您就用了私有代碼，除了IE之外，在別的瀏覽器中毫無(wú)作用。如果驗(yàn)證器告訴您代碼沒(méi)有定義，極有可能您用了私有樣式，這樣在不同的瀏覽器中很難達(dá)到一致的效果。
如果布局中一定要用浮動(dòng)對(duì)象，別忘了適時(shí)使用清除（clear）屬性。
浮動(dòng)對(duì)象似易實(shí)難，而且不總是令人如愿以償。如果您發(fā)現(xiàn)浮動(dòng)對(duì)象伸出了容器的邊界，或者不像您所期望的那樣顯示，請(qǐng)檢查您的期望是否正確。關(guān)于這個(gè)問(wèn)題請(qǐng)看Eric?Meyer的教程
邊距的合并：可用padding?或?border?來(lái)避免。
您可能被多余的（或者想要卻不出現(xiàn)的）空白搞得焦頭爛額。如果您用了?margins，邊距的合并可能就是問(wèn)題的根源。?Andy?Budd?對(duì)此的解釋可能為你解惑。
避免將?padding/border?和固定寬度同時(shí)應(yīng)用到同一元素。
IE5?的區(qū)塊模型是錯(cuò)誤的，是它把事情辦壞了。對(duì)此也有權(quán)宜之計(jì)，不過(guò)最好是繞過(guò)這個(gè)問(wèn)題，當(dāng)子元素的寬度固定時(shí)，為父元素指定padding。
三、避免IE下未指定樣式內(nèi)容的閃爍。?
如果您僅僅靠?@import?來(lái)輸入外部樣式表，早晚您會(huì)發(fā)現(xiàn)IE有"閃爍"的毛病。在應(yīng)用CSS樣式之前，未經(jīng)格式化的HTML文本會(huì)短暫地出現(xiàn)。這是可以避免的。
四、別指望?min-width?在IE中有用。?
IE不支持它，但是它將?width?當(dāng)作?min-width，所以通過(guò)一些?IE?的過(guò)濾技巧（filtering），可以實(shí)現(xiàn)同樣的最終效果。
把CSS過(guò)濾器（filters）當(dāng)作最后的手段
CSS?技巧和過(guò)濾器可以使您有選擇地應(yīng)用到（或者不應(yīng)用到）某些元素。應(yīng)當(dāng)盡可能地找到標(biāo)準(zhǔn)的跨瀏覽器的解決辦法來(lái)實(shí)現(xiàn)您想要的效果，而不是動(dòng)不動(dòng)就使用過(guò)濾器。要將它當(dāng)成走投無(wú)路時(shí)的救命手段。在這里可以找到大量的CSS?過(guò)濾技巧。［譯注：不要把這里的filters和IE中的濾鏡混淆。由于各個(gè)瀏覽器對(duì)CSS標(biāo)準(zhǔn)的支持程度不一，人們找到了許多技巧，將瀏覽器無(wú)法解釋或錯(cuò)誤解釋的樣式表或規(guī)則屏蔽掉。這就是所謂的CSS過(guò)濾器或技巧。webjx.com
如果使用了錨點(diǎn)，在應(yīng)用超鏈接樣式時(shí)要特別小心。
如果您在代碼中使用了傳統(tǒng)的錨點(diǎn)（），您會(huì)注意到?：hover?和?：active偽類(lèi)也會(huì)作用于它。要避免這種情形，你可以使用?id，或者使用鮮為人知的語(yǔ)法：?：link:hover，?：link:active
五、記住"LoVe/HAte"（愛(ài)/恨）鏈接規(guī)則?
要以下面的順序指定超鏈接偽類(lèi)：Link，?Visited，?Hover，?Acitve。任何其他順序都不妥當(dāng)。假如用了：focus，次序應(yīng)為?LVHFA（"Lord?Vader‘s?Handle?Formerly?Anakin"，Matt?Haughey這樣建議）。
請(qǐng)記住"TRouBLED"（麻煩的）邊框。
邊框（border）、邊距（margin）和補(bǔ)白（padding）的簡(jiǎn)寫(xiě)次序?yàn)椋喉槙r(shí)針?lè)较驈纳祥_(kāi)始，即?Top，?Right，?Bottom，?Left。比如?margin：?0?1px?3px?5px;表示上邊距為零，右邊距為1px，依此類(lèi)推。
六、非零值要指明單位。?
在用CSS指定字體、邊距或大小時(shí)，必須指明所用的單位。某些瀏覽器對(duì)未指明單位的處理方法不足為憑。零就是零，不管是?px還是em還是其他單位，它不需要單位。例如：?padding：?0?2px?0?1em;
七、測(cè)試不同的字體大小。?
像Mozilla和Opera這樣的高級(jí)瀏覽器允許對(duì)字體進(jìn)行縮放，不管你用的是什么單位。某些用戶的默認(rèn)字體大小肯定和您的不同，盡最大努力去滿足他們。
用嵌入式測(cè)試，發(fā)布時(shí)改為輸入。
將樣式表嵌入在你的HTML源代碼中，在測(cè)試時(shí)可以消除許多緩存引起的錯(cuò)誤，尤其是某些Mac下的瀏覽器。但在發(fā)布前，一定要記住將樣式表移到外部文件，用?@import?或?引入。
八、加上明顯的邊框有利于布局調(diào)試。?
像?div?{border：?solid?1px?#f00;}?之類(lèi)的全局規(guī)則可以暫時(shí)為你查出布局問(wèn)題。為特定的元素加上邊框可幫您找到難以發(fā)覺(jué)的交錯(cuò)或空白問(wèn)題。
對(duì)圖片路徑不要用單引號(hào)。
當(dāng)設(shè)置背景圖片時(shí)，要堅(jiān)持用雙引號(hào)。盡管看起來(lái)有些多余，但是如果不這么做，IE5/Mac會(huì)噎住。
不要為將來(lái)的樣式表（比如手持式設(shè)備或打印用樣式表）留個(gè)"空位"。
Mac?IE5?對(duì)空的樣式表比較感冒，會(huì)增加頁(yè)面的裝入時(shí)間。建議樣式表中至少應(yīng)該有一條規(guī)則（哪怕是注釋也好），免得?MacIE噎住。
另外值得一提的還有一些雖然不針對(duì)某些功能，但是在開(kāi)發(fā)過(guò)程中應(yīng)當(dāng)注意的理論
九、好好組織您的CSS文件?
恰當(dāng)?shù)爻蓧K注釋CSS，將相似的CSS選擇符編為一組，養(yǎng)成一致的命名習(xí)慣和空白格式（為跨平臺(tái)考慮，建議用空白字符而不是tab。）以及適當(dāng)?shù)拇涡颉?br> 以功能（而不是外觀）為類(lèi)和ID命名
假如您創(chuàng)建了一個(gè)?.smallblue?類(lèi)，后來(lái)打算將文字改大，顏色變?yōu)榧t色，這個(gè)類(lèi)名就不再有任何意義了。相反，您可以用更有描述性的名字如?.copyright?和?.pullquote。
十、組合選擇符
保持CSS短小對(duì)減少下載時(shí)間非常重要。請(qǐng)盡量為選擇符分組、?利用繼承（inheritance）以及使用簡(jiǎn)寫(xiě)（shorthand）來(lái)減少冗余。
使用圖片替換技術(shù)時(shí)要考慮親和力
已經(jīng)發(fā)現(xiàn)傳統(tǒng)的FIR在屏幕閱讀器，以及關(guān)閉圖片顯示［的瀏覽器］中會(huì)出問(wèn)題。?對(duì)此有其他解決辦法，要根據(jù)具體情況，慎重使用。
關(guān)鍵詞標(biāo)簽：CSS網(wǎng)頁(yè)布局
相關(guān)閱讀
熱門(mén)文章
DIV+CSS網(wǎng)頁(yè)布局常用的一些基礎(chǔ)知識(shí)整理
完美解決CSS網(wǎng)頁(yè)水平居中
XHTML+CSS兼容解決方案
CSS網(wǎng)頁(yè)布局困擾新手的八個(gè)問(wèn)題
人氣排行 DIV CSS完美兼容IE6/IE7/FF的通用方法 CSS實(shí)例：list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實(shí)例 CSS實(shí)例:通過(guò)定義漸變邊框給圖片加陰影 CSS常用技巧之一 禁止文字自動(dòng)換行 網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)中CSS十大注意 解決用CSS控制DIV居中失效的問(wèn)題 css div設(shè)置float后高度不能自動(dòng)增加 讓CSS兼容IE和Firefox的技巧集合