DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS制作網頁時遇到問題的快速參考技巧
CSS制作網頁時遇到問題的快速參考技巧
編輯:CSS詳解     

在使用CSS建站時,您肯定遇到過形形色色的布局問題,最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更為容易,當您遇到困難時為您提供快速參考。

有疑問,先驗證

 
在調試時,先對您的代碼進行驗證往往能省去不少麻煩事。格式不正確的XHtml/CSS 會導致許多布局上的錯誤。 
在其他浏覽器中進行測試之前,請先在最先進的浏覽器中撰寫和測試CSS代碼,而不是相反。 
如果您在破舊的浏覽器中編寫和測試,你的代碼就不得不依賴那個破舊浏覽器的糟糕的顯示,然後在符合標准的浏覽器中進行測試,看到顯示結果“不正常”時,你會很沮喪的。相反,您應該先將您的代碼完善,然後再設法為較低級的浏覽器打算。這樣從一開始您的代碼就是符合標准的,你不必再為支持其他浏覽器而勞心費神。當然了,目前遵從標准的浏覽器無疑就是 Mozilla, Safari 或 Opera。

確保您期望的效果確實存在 
許多特定的浏覽器專有的CSS擴展在正式標准中並不存在。 如果您對 filter(濾鏡) 或滾動條指定了樣式,那麼您就用了私有代碼,除了IE之外,在別的浏覽器中毫無作用。如果驗證器告訴您代碼沒有定義,極有可能您用了私有樣式,這樣在不同的浏覽器中很難達到一致的效果。

如果布局中一定要用浮動對象,別忘了適時使用清除(clear)屬性。 
浮動對象似易實難,而且不總是令人如願以償。如果您發現浮動對象伸出了容器的邊界,或者不像您所期望的那樣顯示,請檢查您的期望是否正確。關於這個問題請看Eric Meyer的教程

邊距的合並:可用padding 或 border 來避免。 
您可能被多余的(或者想要卻不出現的)空白搞得焦頭爛額。如果您用了 margins,邊距的合並可能就是問題的根源。 Andy Budd 對此的解釋可能為你解惑。

避免將 padding/border 和固定寬度同時應用到同一元素。 
IE5 的區塊模型是錯誤的,是它把事情辦壞了。對此也有權宜之計,不過最好是繞過這個問題,當子元素的寬度固定時,為父元素指定padding。

避免IE下未指定樣式內容的閃爍。 
如果您僅僅靠 @import 來輸入外部樣式表,早晚您會發現IE有“閃爍”的毛病。在應用CSS樣式之前,未經格式化的Html文本會短暫地出現。這是可以避免的.

別指望 min-width 在IE中有用。 
IE不支持它,但是它將 width 當作 min-width,所以通過一些 IE 的過濾技巧(filtering),可以實現同樣的最終效果。

把CSS過濾器(filters)當作最後的手段 
CSS 技巧和過濾器可以使您有選擇地應用到(或者不應用到)某些元素。應當盡可能地找到標准的跨浏覽器的解決辦法來實現您想要的效果,而不是動不動就使用過濾器。要將它當成走投無路時的救命手段。在這裡可以找到大量的CSS 過濾技巧。[譯注:不要把這裡的filters和IE中的濾鏡混淆。由於各個浏覽器對CSS標准的支持程度不一,人們找到了許多技巧,將浏覽器無法解釋或錯誤解釋的樣式表或規則屏蔽掉。這就是所謂的CSS過濾器或技巧。webjx.com

如果使用了錨點,在應用超鏈接樣式時要特別小心。 
如果您在代碼中使用了傳統的錨點(<a name="anchor">),您會注意到 :hover 和 :active偽類也會作用於它。要避免這種情形,你可以使用 id,或者使用鮮為人知的語法: :link:hover, :link:active

記住“LoVe/HAte”(愛/恨)鏈接規則 
要以下面的順序指定超鏈接偽類:Link, Visited, Hover, Acitve。任何其他順序都不妥當。假如用了 :focus,次序應為 LVHFA(“Lord Vader's Handle Formerly Anakin”,Matt Haughey這樣建議)。

請記住“TRouBLED”(麻煩的)邊框。 
邊框(border)、邊距(margin)和補白(padding)的簡寫次序為:順時針方向從上開始,即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上邊距為零,右邊距為1px,依此類推。

非零值要指明單位。 
在用CSS指定字體、邊距或大小時,必須指明所用的單位。某些浏覽器對未指明單位的處理方法不足為憑。零就是零,不管是 px還是em還是其他單位,它不需要單位。例如: padding: 0 2px 0 1em;

測試不同的字體大小。 
像Mozilla和Opera這樣的高級浏覽器允許對字體進行縮放,不管你用的是什麼單位。某些用戶的默認字體大小肯定和您的不同,盡最大努力去滿足他們。

用嵌入式測試,發布時改為輸入。 
將樣式表嵌入在你的Html源代碼中,在測試時可以消除許多緩存引起的錯誤,尤其是某些Mac下的浏覽器。但在發布前,一定要記住將樣式表移到外部文件,用 @import 或 <link>引入。

加上明顯的邊框有利於布局調試。 
像 div {border: solid 1px #f00;} 之類的全局規則可以暫時為你查出布局問題。為特定的元素加上邊框可幫您找到難以發覺的交錯或空白問題。

對圖片路徑不要用單引號。 
當設置背景圖片時,要堅持用雙引號。盡管看起來有些多余,但是如果不這麼做,IE5/Mac會噎住。

不要為將來的樣式表(比如手持式設備或打印用樣式表)留個“空位”。 
Mac IE5 對空的樣式表比較感冒,會增加頁面的裝入時間。建議樣式表中至少應該有一條規則(哪怕是注釋也好),免得 MacIE噎住。 
另外值得一提的還有一些雖然不針對某些功能,但是在開發過程中應當注意的理論

好好組織您的CSS文件 
恰當地成塊注釋CSS,將相似的CSS選擇符編為一組,養成一致的命名習慣和空白格式(為跨平台考慮,建議用空白字符而不是tab。)以及適當的次序。

以功能(而不是外觀)為類和ID命名 
假如您創建了一個 .smallblue 類,後來打算將文字改大,顏色變為紅色,這個類名就不再有任何意義了。相反,您可以用更有描述性的名字如 .copyright 和 .pullquote。

組合選擇符 
保持CSS短小對減少下載時間非常重要。請盡量為選擇符分組、 利用繼承(inheritance)以及使用簡寫(shorthand)來減少冗余。

使用圖片替換技術時要考慮親和力 
已經發現傳統的FIR在屏幕閱讀器,以及關閉圖片顯示[的浏覽器]中會出問題。 對此有其他解決辦法,要根據具體情況,慎重使用。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved