1. 不要用hack，一定有更好的解決辦法。很多情況都是因為**結構不夠好才會出現相容性問題。
2. 思考如何用最少的標籤及屬性實現頁面。
3. 理解結構，表現，行為分離的意義。
4. 布局前一定要先分析頁面結構，磨刀不誤砍柴工，分析怎麼用更好的辦法實現，理清思路後，再切圖寫**。
5. 深刻理解類的概念，注重歸類元素，多總結，保持**風格（包括前後**的空格位置、多少，以及命名風格）嚴格一致並且盡量簡潔。
6. 多用組合，少用繼承。
7. 命名空間：駝峰命名法用於區別不同單詞，劃線用於表明從屬關係。
8. 低權重原則------避免濫用子選擇器(即類似#test span這樣的選擇符)。
Flex布局的相容性
寫在前面 flex布局早在2009年就有了，而現在是2015年6月8日，使用最新的flex語法會發現支援程度並不好，即使是在 高階 瀏覽器上也是如此，比如chrome firefox safari android ios safari下支援程度各不相同 網上現有的 中充斥著各種版本，在chrome下...
flexbox布局的相容性
flex布局早在2009年就有了，而現在是2015年6月8日，使用最新的flex語法會發現支援程度並不好，即使是在 高階 瀏覽器上也是如此，比如chrome firefox safari android ios safari下支援程度各不相同 網上現有的 中充斥著各種版本，在chrome下執行一般都...
相容性（空格相容性）
在chrome與firefox下顯示的寬度不同，原因是兩個瀏覽器的預設字型不同，給html規定字型即可解決。下面有各種形式的空格，各有不同 不換行空格，按下空格鍵所產生的空格，受字型影響明顯 ensp 半形空格 em寬度的一半 乙個小寫字母的寬度 基本不受字型影響 emsp 全形空格 乙個em寬度 ...