1、有疑問，先驗證
格式不正確的XHTML/CSS會導致許多錯誤。
（遵從標準的瀏覽器是Mozilla/Firefox, Safari, Opera）
2、確保你期望的效果確實存在
3、如果有浮動，就要適時使用clear
clear 屬性設置一個元素的側面是否允許其他的浮動元素
可取的值：left|right|both|none
4、邊距的合併
如果使用了margin，邊距的合併將會出現問題。避免將padding/border和固定寬度同時應用到同一元素。當子元素固定時，爲父元素指定padding。
5、避免IE下未指定樣式內容的閃爍。
如果僅使用@import來輸入外部樣式表，早晚會發現IE有閃爍的毛病。應用css之前，未經格式化的HTML文本會短暫的出現。
6、可憐的min-width
min-width 屬性設置元素的最小寬度。
IE不支持它，但是它將 width 當作 min-width。
7、如果使用了錨點，在應用超鏈接樣式時要特別小心。
如果您在代碼中使用了傳統的錨點(<a name="anchor">)，您會注意到 :hover 和 :active僞類也會作用於它。要避免這種情形，你可以使用 id。
8、“LoVe/HAte”（愛/恨）鏈接規則
要以下面的順序指定超鏈接僞類：Link, Visited, Hover, Acitve。任何其他順序都不妥當。假如用了 :focus，次序應爲 LVHFA
提示：在 CSS 定義中，a:hover 必須被置於 a:link 和a:visited之後，纔是有效的。
提示：在 CSS 定義中，a:active 必須被置於 a:hover 之後，纔是有效的。
提示：僞類名稱對大小寫不敏感。
9、請記住“順時針”邊框。
邊框(border)、邊距(margin)和補白(padding)的簡寫次序爲：順時針方向從上開始，即Top,Right,Bottom,Left。比如margin:0 1px 3px 5px ; 表示上邊距爲零， 右邊距爲1px，依此類推。
10、非零值要指明單位。
在用CSS指定字體、邊距或大小時，必須指明所用的單位。某些瀏覽器對未指明單位的處理方法不足爲憑。零就是零，不管是px還是em還是其他單位，它不需要單位。例如： padding: 0 2px 0 1em;
11、測試不同的字體大小。
像Mozilla和Opera這樣的高級瀏覽器允許對字體進行縮放，不管你用的是什麼單位。某些用戶的默認字體大小肯定和您的不同，盡最大努力去滿足他們。
用嵌入式測試，發佈時改爲輸入。
12、將樣式表嵌入在你的HTML源代碼中，在測試時可以消除許多緩存引起的錯誤，尤其是某些Mac下的瀏覽器。但在發佈前，一定要記住將樣式表移到外部文件，用@import 或 <link>引入。
13、加上明顯的邊框有利於佈局調試。
像 div {border: solid 1px #f00;} 之類的全局規則可以暫時爲你查出佈局問題。爲特定的元素加上邊框可幫您找到難以發覺的交錯或空白問題。
14、好好組織您的CSS文件
恰當地成塊註釋CSS，將相似的CSS選擇符編爲一組，養成一致的命名習慣和空白格式（爲跨平臺考慮，建議用空白字符而不是tab）以及適當的次序。
15、以功能（而不是外觀）爲類和ID命名
假如您創建了一個.smallblue類，後來打算將文字改大，顏色變爲紅色，這個類名就不再有任何意義了。相反，您可以用更有描述性的名字如 .copyright 和 .pullquote。
16、組合選擇符
保持CSS短小對減少下載時間非常重要。請儘量爲選擇符分組、 利用繼承(inheritance)以及使用簡寫(shorthand)來減少冗餘。
17、使用圖片替換技術時要考慮親和力
已經發現傳統的FIR在屏幕閱讀器，以及關閉圖片顯示的瀏覽器中會出問題。 對此有其他解決辦法，要根據具體情況，慎重使用。
18、樣式表中導入樣式表需在頂端 覆蓋規則爲本身樣式覆蓋導入樣式。
19、CSS樣式表細分化：顏色、佈局、風格、表單、均可分離，這樣對以後的修改和風格設計更方便。
20、盒模型：內→外
以下是引用片段：
content←width height(補充：height只有在父元素定義了絕對高度時其%纔有意義)
border
padding（內補丁）-“填充”
background-image
background-color
margin(外補丁)-“空白邊”透明 可爲負值
記住:在css中 width是指內容區域的寬度
IE/WIN與盒模型：
IE5.5/IE6怪異模式下： 元素框總寬度=content.width+margin.width
FireFox/Opera/.. : 元素框總寬度=content.width+padding.width+border.width+margin.width
差異在於：IE5.5/IE6怪異模式下 width=有效content.width+padding.width+border.width 內補丁和邊框被算在內容寬度裏面
#select{width:750px;padding:10px;border:5px} IE怪異模式:總寬度：750px FF/OP：780px
IE怪異模式:有效內容寬度：750-20-10 FF/OP：750
IE6正常模式下：同於FF/OP
處理方法：在父元素或子元素中使用padding 本身不使用
空白邊疊加：當兩個空白邊疊加時 頂或底邊將會疊加 實際空白邊高度=空白邊大的值
例：
<div id="top" style="margin:0 0 10px 0;"></div><div id="bottom" style="margin:20px 0 0 0；"></div>
空白邊高度爲20px
但是如果這個時候你添加邊框或則填充，將不再疊加。
21、float浮動
記住：“在標準瀏覽器中 浮動元素脫離了文檔流 不佔據外圍容器空間” 明白了這點 你就會明白爲什麼IE和FIREFOX下表現的不同了。IE5.5、IE6浮動元素依然佔據外圍容器空間
例如：怎麼在IE下feeter正常 在firefox下就跑上去了呢？
IE下 當float和text-align定義的方向一樣時 出現雙倍錯誤：
select{float:left;text-align:left;margin:0 10px;}實際左邊margin-left：20px；FF/OP：10px 解決：加上display：inline；
22、背景圖像的定位
只談百分比 background:url(image-url.gif)no-repeat 20% 30% 20%：將圖像X軸20%處與父元素X軸20%處重合 Y同理 top=0% bottom=100% left=0% right=100% center=50%
23、滑動門
左右兩個DIV 背景分別定義 一般左背景圖像比較長; 左背景定位：left center 右背景定位：right center
外部控制容器寬度一般小於等於兩個背景和 這樣當內容動態變化時候 右背景圖像便感覺像在左背景圖像上滑動，故名。
這樣也可以實現：<div id="nav"><ul><li><a href="index.html"><span>首頁</span></a></li></ul></div>
#nav a{float:left;background:url("../images/navLeft.gif") no-repeat left top;padding:0;text-decoration:none; cursor:hand;}
#nav a span {float:left;display:block;background:url("../images/navRight.gif") no-repeat right top;padding:5px 36px 5px 40px;color:#ffffff}
24、完美的居中佈局
body{text-align：center；mini-width：760px；}
div#wrapper{margin：0 auto；text-align：left；width：750px；}
mini-width IE並不認識 這是爲老瀏覽器準備的，只是這個值比你需要的實際頁面大就OK