層疊樣式表/相容性
每次修改時，至少在四個瀏覽器引擎（Gecko、Webkit、Trident、Presto）中進行測試，以避免在佈局樣式任務“結束”時進行大量除錯工作。
僅對可能出現在單個頁面多個部分的元素集合使用類，否則只需使用其容器的 ID 引用該集合。
驗證 HTML 和 CSS 程式碼，以確保標記不會破壞佈局，並且樣式規則不包含任何語法錯誤。
如果元素之間存在神秘的空白，請確保已重置邊距和填充。
如果佈局神秘地被破壞，請確保錨標記和巢狀的影像或跨度之間沒有換行符或空白。
使用基於瀏覽器的盒子模型工具（例如：Chrome 的Web Developer Toolbar、Firefox 的Firebug、Opera Dragonfly或IE Developer Toolbar）確保每個元素的四個角都可見，以識別與溢位相關的問題。如果寬度過大且右側邊框丟失，則減小元素的固定寬度。如果高度過大且底部邊框丟失，如果內容未被截斷，則關閉溢位，否則減小高度或重新定位任何使用絕對定位、相對定位或負邊距遮擋內容的相鄰元素。
在 IE Developer Toolbar 中使用應用樣式上下文選單檢視級聯中的哪些規則覆蓋了您想要的規則。
確保用於提高特異性的父元素在所有模板中都可用。
對於驗證器無法在 URL 上工作的頁面，複製並貼上生成的原始碼到 HTML 驗證器中。
確保任何子元素的填充不會強制容器擴充套件到其定義的尺寸之外，並且如果無法避免在同一元素上同時設定填充和寬度或高度，則相應地減小尺寸。
確保在瀏覽器 chrome 中有和沒有工具欄的情況下測試佈局，以確保新增或刪除瀏覽器選單不會觸發任何最小高度錯誤。
確保您定義的樣式不會被具有更高特異性的現有樣式或 CSS 程式碼中稍後定義的樣式覆蓋，方法是使用對父類或 ID 的引用來增加選擇器權重。
確保使用Firebug或Web Inspector（CTRL + Shift + C）驗證本地 CSS 規則的微重置，並在必要時增加選擇器權重以覆蓋可能無意中導致神秘佈局問題的級聯。
在為通用樣式執行此操作時，請確保增加 IE 特定 CSS 規則的選擇器權重。
確保容器的寬度和高度尺寸留有足夠的空間來提供 CSS 程式碼中宣告的垂直或水平位置。
確保所有浮動元素的寬度和高度尺寸都符合容器的限制。
確保右對齊內容（例如標籤副本）的寬度僅為滿足需要的大小，以避免使用左邊距或填充進行對齊，因為它在不同瀏覽器之間可能不一致。
確保具有換行內容的浮動元素具有定義的寬度和正確的文字對齊方式。
確保任何在 :hover 上擴充套件的容器都具有一個預設寬度和高度，該寬度和高度大於或等於任何巢狀元素的大小。
確保固定寬度容器使用 overflow:hidden，以便收縮包裝的巢狀塊不會在舊版 Firefox 中導致邊距摺疊。
確保所有內聯元素都絕對定位或包含在塊級元素中。
更改容器的位置屬性，以確保它允許巢狀元素的絕對或相對放置。
建立模板的副本，並刪除除未對齊的 div 及其相鄰 div 之外的所有 div，以除錯定位問題。
在不響應 display:inline 或 display:inline-block 宣告的塊級元素周圍放置一個容器 div。
在除錯絕對定位的 div 中被忽略的定位值時，從內部 div 中刪除邊距。
刪除所有內聯文字，並以不換行空格作為佔位符內容，以除錯寬度和高度問題。
將邊距、填充、字型大小和邊框大小設定為零，以除錯未見到的繼承問題。
如果內聯文字的邊距不一致（例如使用標記建立標題以及具有邊距偏移量的一畫素高元素以建立圓角），則使用 display:block 和固定高度。
對於 IE6 和 IE7，使用每個行的唯一固定寬度而不是邊距偏移量在內聯塊容器內建立圓角。
使用每個行的唯一 background-position 使用覆蓋容器一半但不覆蓋另一半的背景影像建立圓角。
當絕對定位的元素或邊距與其他瀏覽器不一致時，使用 IE 特定的樣式。
當絕對定位的元素未出現在 IE 中正確相對定位的父元素內時，使用固定寬度容器。
如果具有 position:absolute 或 relative 的內容在 IE 中滾動時表現得像 position:fixed，則在具有 overflow:scroll 或 auto 的容器上使用 position:relative。
在除錯內部 div 時，使用明顯的背景顏色突出顯示放置錯誤或未對齊的巢狀元素。
使用內聯樣式並刪除 ID 和類引用以顯示由於未知 CSS 錯誤而不可見的元素。
使用 word-wrap:break-word（CSS3 屬性）或 wbr（及其替代方案）在長單詞內換行，以防止不可分割字串的溢位導致水平捲軸或塊無意中換行。
在 IE5 集中使用表格特定的字型規則，因為應用於 html 和 body 標記的規則不會級聯到表格元素。
當邊距不起作用時，使用 div 而不是段落。
使用 div 而不是段落以避免段落之間繼承的垂直邊距。
在絕對定位的元素上使用 display:inline 以避免 hasLayout 問題。
使用邊距移動絕對定位的元素，而不是方向偏移。
使用 border-collapse: collapse; 和 border-spacing:0 刪除表格列之間的間隙。
在執行上述操作後，在 td 元素而不是 tr 元素上使用邊框樣式，以在表格上建立網格線。
使用 empty-cells: hide 刪除空表格單元格的邊框。
在內聯文字上使用 position:relative，在塊級容器和媒體上使用 position:absolute。
使用 inline-block 為相對定位的容器提供 hasLayout。
確保類選擇器不會被 ID 選擇器的預設值無意中覆蓋，尤其是精靈的 background-position 更改，方法是使用長手寫法劃分 ID 選擇器的屬性。
使用 vertical-align middle 在 IE 中對齊內聯塊元素；對於表單元素，使用 vertical-align:top。
如果負邊距未顯示溢位內容，則在父元素上使用 overflow:visible。
建立更多具有特定名稱的類，而不是建立更復雜的父=>子引用。
確保沒有更具體的 CSS 規則或樣式表中稍後出現的規則覆蓋所需的效果。
確保被忽略的類或 ID 名稱的開頭沒有數字。
IE 僅在錨標記上發生更改時才會更改懸停子元素的狀態，因此如果像 a:hover span { display:block; } 之類的內容不起作用，請使用冗餘效果，例如 a:hover{ visibility:visible; }。
如果在錨標記上設定了在該錨的任何其他偽類中未宣告的屬性（例如 text indent:0、float:none、direction:inherit、visibility:inherit、white-space:normal 等），則 IE 僅會更改使用父類或 id 引用其懸停子元素的狀態。例如 .class a:hover span{} 需要 .class a:hover{visibility:inherit;}。
IE 會增加具有斜體字型樣式的容器的寬度，因此如果可能，請使用 overflow:hidden 以避免不一致的換行。
如果頁面上的連結僅在 IE 中可點選，請查詢覆蓋連結的絕對定位元素，並提高連結容器的 z-index 值或重新定位佈局，以便不會發生重疊。
如果一組元素的屬性值不起作用，請重新定義其中一個元素的該屬性值，以檢視是否缺少逗號或不支援的選擇器使整個規則無效。
#business_photo, .sentence, .instruction, .list > li { padding-bottom: 24px; }
/* Redefine the same padding value because the descendant selector nullifies the above line in IE6 */
#business_photo { padding-bottom: 24px; }
如果事件或懸停觸發子選單或其他隱藏內容的顯示時，相鄰元素神秘地重新定位，請確保該內容未在外部 CSS、內聯 CSS 或生成的 JavaScript 屬性中相對定位。
如果一系列帶有標題的列表之間的邊距不一致，這是由於特殊情況造成的，例如長列表的捲軸或第一個或最後一個列表的不同邊距，請從列表本身中刪除邊距，並將它們放在標題上，並在容器的頂部和底部使用填充來處理第一個或最後一個列表與邊框之間的間距。
如果元素周圍沒有顯示邊框，請將顏色設定為黑色或白色，以檢視顏色是否太淺或太深而無法與背景區分開來。
如果 div 被推到其指定位置下方的新行，請使用滑鼠選擇 div 內的內容，以檢視其中的塊元素的尺寸是否導致容器外部溢位。除了驗證 HTML 以確保沒有缺少塊標記或內聯標記嵌套了塊標記之外，請確保設定容器內任何表單的寬度。
如果超連結的懸停或已訪問狀態無法正常工作，請執行以下檢查：-確保偽類按正確的順序定義-確保偽類不與不太具體的元素共享相同的定義，例如 a:hover{color: #ccc;} 和 .mylink:hover{color: #ccc;}，因為瀏覽器會將它們組合在一起，並在級聯中解析不太具體的規則，然後再解析更具體的規則，例如 .mysite{color: #eee;}。如果是這種情況，請向偽類規則新增對父容器的引用，例如 .mymenu .mylink:hover{color: #ccc;} 以增加選擇器權重。-確保偽類是在元素選擇器而不是類選擇器中定義的，例如 .nav a:hover 與 nav a.submenu:hover。這在 IE6 中可能不起作用。-確保規則按正確的順序定義，順序如下：1. :link, :visited 2. :hover, :focus 3. :active
由於連結可以同時處於 :visited、:hover 和 :active 狀態，並且它們具有相同的特異性，因此最後列出的狀態將獲勝。
增加或減少容器內的文字，以確保它換行並正確調整大小
多次增加或減少瀏覽器的字型大小，以檢視它如何影響您的背景和邊距，尤其是在標題和導航中使用的文字
將類應用於不同的元素，以確保每個類都不依賴於特定的標籤
在 div 內包含幾個塊元素，例如一些段落和一個大型列表，以檢視它是否破壞了容器的流程
如果浮動元素在 IE6 或 IE7 中不可見，請在它們上設定 position:relative
如果斷詞導致任何具有相對尺寸的巢狀容器擴充套件，請為資料表格單元格設定固定寬度或高度。如果在任何表格單元格內都有一個寬度為百分比的 div 容器，則在另一個單元格中強制斷詞的內容會導致 div 的相對寬度在 IE6 和 IE7 中增長以匹配表格單元格的溢位寬度，除非在單元格上設定了顯式寬度或高度以包含內容
如果某個元素在 IE 中拉伸到超出其定義高度，請重置其 line-height
使用 clear 將元素從浮動同級元素分離並將其換行
透過開發容器樣式的命名約定和組織，在不考慮內容的情況下，分離 HTML 結構和 CSS 設計
建立可重用的標題、頁尾、子選單、導航欄、列表、表單和網格佈局庫
對類和 ID 使用一致的語義樣式名稱
設計模組使其內部透明
透過將多個類應用於元素來擴充套件物件
在所有專案中使用 CSS 重置樣式、網路安全字型和網格
避免使用在級聯之外會中斷的位置相關的樣式
避免使用描述其對映到的標籤或屬性的類名，例如 .hidediv 或 .floatleft
避免使用 ID 來設定主要佈局容器內內容的樣式
避免使用影像替換文字
避免在不規則背景上使用陰影和圓角
避免將 div 巢狀在 span 內或將 span 與 div 相鄰放置，以防止觸發匿名塊框行為引起的副作用
在 IE6 中使用 1px 點狀邊框存在錯誤，將顯示虛線邊框。使用 IE6 特定的 2px border-width 樣式和所需顏色的較淺色調來抵消較大的畫素尺寸。
對於表單元素，除了頂部或底部之外的任何 vertical-align 值在瀏覽器之間的呈現效果都不一致
僅當 HTML 標記不可編輯時，才使用 !important 宣告建立使用者樣式表或覆蓋內聯樣式。!important 宣告必須跟在其打算賦予權重的屬性的值之後。由於可以向任何 HTML 標籤新增內聯樣式，因此如果未為元素定義類或 ID 屬性，則使用 style 屬性選擇器是覆蓋這些樣式的唯一方法，例如以下示例
div[style]{ background-color: #f00 !important; }
在使用 abs pos 元素時，在 IE6 的 HTML 原始碼順序中，將它們設為 rel pos 容器的最後一個子元素
在 href 內巢狀一個 abs pos span 以創建出現在不同位置的下拉選單
使用巢狀 span 技巧透過將其背景顏色設定為所需的導航背景並在懸停時使其可見，突出顯示導航列表的父容器。將 ul 設為 rel pos 父元素併為其設定 overflow hidden，並將空的 span 設定為 bottom:0; z-index:-1; height: 99em; 以及與導航相等的寬度
<ul id="nav"><li><a href="#"><span></span>Test 1</a></li></ul>
使用巢狀 span 技巧透過偏移其背景定位並將其放置在所需內容之上來建立多邊形形狀的連結
使用 a:focus{width:0,height:0,outline:0} 刪除點狀邊框
使用 abs/rel 定位在 IE6/7 中模擬輪廓
使用重置除錯邊距/填充問題
如果間距不正確，請使用邊距刪除填充和 abs 定位元素的頂部/底部定位
使用 :default 選擇所有單選按鈕集
在 IE6 中使用 :active 作為 :focus
確保在所有模板中都提供了用於特異性的父 div
使用帶有背景顏色的相對/絕對 div，使用以下步驟用省略號替換文字
建立一個 content div，其中包含原始內容，其高度等於字型大小 * 您希望可見的行數
當觸發 JavaScript 事件時，透過新增具有該設定的類，將高度減少到您希望可見的新行數
確保類選擇器不會被 ID 選擇器的預設值意外覆蓋，尤其是精靈的 background-position 更改，方法是將 ID 選擇器的屬性分成幾部分
使用 vertical-align middle 在 IE 中對齊內聯塊元素；對於表單元素，使用 vertical-align:top。
使用 change 事件委派輸入和選擇元素
使用活動連結狀態和相對定位來響應連結點選
使用以下替代方案緩衝螢幕外內容：-使用負邊距而不是 display:none-使用相對定位偏移而不是 visibility:hidden 用於文字-使用 background-position 而不是 visibility:hidden 用於影像-使用 display:inline block 而不是 display:table-使用 clip:rect 而不是 max-width/height
在 Firefox 2 中，絕對定位的元素移到其相對定位的父元素之外會導致容器拉伸
對最外層元素使用邊距
對具有背景顏色或影像的元素使用填充
- -moz-only-whitespace 匹配一個根本沒有子節點或空文字節點或僅包含空格的文字節點的元素。僅當元素記憶體在元素節點或包含一個或多個字元的文字節點時，該元素才不再匹配此偽類。
- -moz-selection (::selection) 偽元素應用於使用者已突出顯示（例如，使用滑鼠選擇）的文件部分。
:-moz-first-node 偽類匹配某個其他元素的第一個子節點的元素。它與 :first-child 不同，因為它不匹配在其之前有（非空格）文字的第一個子元素。
:-moz-last-node 偽類匹配某個其他元素的最後一個子節點的元素。它與 :last-child 不同，因為它不匹配在其之後有（非空格）文字的最後一個子元素。
::-moz-list-bullet 偽類用於編輯列表元素的專案符號。
:default 偽類用於識別在一組類似元素中為預設的使用者介面元素
使用 -ms-text-align-last 用於段落末尾的孤行
使用 xsl:number 模擬 IE 中計數器的生成內容
使用輪廓為帶有白色裝飾的按鈕設定樣式
使用 q { quotes: '"' '"' } 定義引號字元
使用以下方法觸發引號字元顯示
q:before { content: open-quote }
q:after { content: close-quote }
使用固定定位和 @media print 在每一頁上顯示標題和頁尾容器
使用 absolute:positioning 而不是 fixed positioning 以避免在每一頁上顯示標題和頁尾容器