文章目錄
onestab 關閉了，希望不是永久的。還好做了鏡像，收下幾篇值得收藏的文章。CSS 錦囊
最後更新：2004.03.05
翻譯：onestab [2004.03.09]
原文：mezzoblue CSS Crib Sheet
在使用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)，可以實現同樣的最終效果。
-
走投無路時，試一試減少寬度
-
由於舍入誤差，有時 50% 加上 50% 等於 100.1%，破壞某些瀏覽器中的布局。不妨試試將 50% 減到 49%，甚至 49.9%。
-
IE 中顯示不正常？
-
可能是 Peekaboo 臭蟲在作怪，尤其是當滑鼠經過超連結時能顯示正常。修補方法見Position is Everything。
-
如果使用了錨點，在應用超連結樣式時要特別小心。
-
如果您在代碼中使用了傳統的錨點(
<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指定字型、邊距或大小時，必須指明所用的單位（唯一的例外是
line-height，很奇怪，它不需要單位）。某些瀏覽器對未指明單位的處理方法不足為憑。零就是零，不管是 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在螢幕助讀程式，以及關閉圖片顯示[的瀏覽器]中會出問題。 對此有其他解決辦法，要根據具體情況，謹慎使用。
More Info
- CSS 禪意花園主人 Dave Shea 訪談
- 用 Mozilla 調試網頁
- CSS Problem-Solving
- css Zen Garden
- 閱讀mezzoblue上的更多文章。
