人一旦習慣了某些東西就很難去改，以及各種各樣的原因，新的瀏覽器越來越多，而老的總淘汰不了。增長總是快於消亡導致了瀏覽器相容是成了談不完的話題。說到瀏覽器相容，css hack自然而然地被我們想起。今天，我們通常都有乙個團隊或者將有乙個團隊的人在乙個公司裡面做相同的事，需要我們有統一的規範來進行coding，以方便維護。而解決相容的方法就是（必須是，因為這才最容易有問題的）其中乙個最重要的、要解決的規範之一。
在解決相容方法上，想定出乙個統一的規範，個人認為應該以下面3點為基本原則：
權衡成本：在瀏覽器被淘汰後，如何快速清理掉無用**
可維護：在資源成本和完美間平衡的向後相容
可讀：省力、易記
這裡把成本放在了第一位，並不是說我們不願意追求完美，而只是，太刻意追求完美有時候可能會阻礙我們前進；在成本後，應該是可維護和可讀，這點對於團隊的合作來說至關重要，而最終結果也是為了減少成本。
先把這三個原則存起來，來看看我們平時解決相容的寫法（後面會附詳細的hack方法列表）：
一、css 選擇器 hack
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
} 這種寫法的優缺點是：
二、css 屬性 hack
.sofish
這種寫法的優缺點是：
三、ie 注釋
ie only
這種寫法的優缺點是：
四、瀏覽器探測：js/後端程式判斷
// 以jquery為例，檢測是否是ie6，是則加上class="ie6"
if ($.browser.msie && $.browser.version = 6 )
這種寫法的優缺點是：
上面4種是我們最常用的方法。現在，讓我們抽出心裡存著的那3個原則，看看如何選擇。要時間思考一下麼？這裡簡單地說一下我的選擇：
1、盡量使用單獨hack
這樣維護起來成本比較低，改動不會影響其他的瀏覽器，而一旦有瀏覽器淘汰，只要搜尋關鍵字，就可以批量去掉這些**。比如，ie6的單獨hack：
_padding:6px;；
2、向後相容的目標：1年
你想現在的**相容ie10麼，誰不想，但這可預見性太低了，也可以說，成本太高了。暫時沒必要。不過，ie9可能要發布了，所以，選擇像
padding:8px\0;
這樣的ie8+的hack，在刪掉其他**不影響向後相容上，會更好；並且，如果ie10出來，一旦支援這個hack，而又沒有這個bug，可能刪掉只影響2個瀏覽器，也會更方便；
3、盡可能省資源
你要是不考慮頁面載入速度，不考慮伺服器承受能力的話，那在向後相容和淘汰的處理上可以做得很完美（從**上），但這從某種程度上，不如不做。
五、個人推薦寫法
.sofish
/* webkit and opera */
@media all and (min-width: 0px) }
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) }
/* firefox * /
@-moz-document url-prefix()} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default /* newest firefox */
準完美主義寫法：配合ie注釋，一律採用選擇器hack（選擇性推薦）
html: 新增body class:
.sofish
.non-ie .sofish
.ie9 .sofish
.ie8 .sofish
.ie7 .sofish
.ie6 .sofish
/* webkit and opera */
@media all and (min-width: 0px) }
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) }
/* firefox * /
@-moz-document url-prefix()} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default /* newest firefox */
[/css]
然後，從第二種方式我們也可以發現。把ie注釋用在body class上，而不是新增單獨的或者@import會是更好的選擇。雖然分檔案也是一種不錯的選擇，但了為頁面載入速度，http請求乙個都不能浪費。
[cc lang="css"]
/***** selector hacks ******/
/* ie6 and below */
* html #uno
/* ie7 */
*:first-child+html #dos
/* ie7, ff, saf, opera */
html>body #tres
/* ie8, ff, saf, opera (everything but ie 6,7) */
html>/**/body #cuatro
/* opera 9.27 and below, safari 2 */
html:first-child #cinco
/* safari 2-3 */
html[xmlns*=""] body:last-child #seis
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
}/* iphone / mobile webkit */
@media screen and (max-device-width: 480px)
}/* safari 2 - 3.1 */
html[xmlns*=""]:root #trece
/* safari 2 - 3.1, opera 9.25 */
* html[xmlns*=""] #catorce
/* everything but ie6-8 */
:root *> #quince
/* ie7 */
*+html #dieciocho
/* firefox only. 1+ */
#veinticuatro, x:-moz-any-link
/* firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default
/***** attribute hacks ******/
/* ie6 */
#once
/* ie6, ie7 */
#doce
/* everything but ie6 */
#diecisiete
/* ie6, ie7, ie8 */
#diecinueve
/* ie7, ie8 */
#veinte
/* ie6, ie7 -- acts as an !important */
#veintesiete /* string after ! can be anything */
其他的就不多說了。不過，還是要提醒一下: 注釋也是很重要的。雖然是hack了，但現實中情況有時候比想象中的複雜得多，給**乙個注釋，好過千言萬語。
最後，還是那句，希望看到你更好的方法！
相容性（空格相容性）
在chrome與firefox下顯示的寬度不同，原因是兩個瀏覽器的預設字型不同，給html規定字型即可解決。下面有各種形式的空格，各有不同 不換行空格，按下空格鍵所產生的空格，受字型影響明顯 ensp 半形空格 em寬度的一半 乙個小寫字母的寬度 基本不受字型影響 emsp 全形空格 乙個em寬度 ...
相容性小結
1.不同瀏覽器的標籤預設的外補丁和內補丁不同。解決 2.chorme瀏覽器下字型最小12px 解決 font size 12px webkit transform origin x 0 webkit transform scale 0.5833333333333334 scale 12 3.ie瀏覽...
程式相容性
版本可以提供各種不同形式的相容性 源 相容性，鏈結相容性，執行相容性，和程序相容性。這些都是根據c 程式建立各個過程命名的，1 如果沒有使用者需要重新編譯任何 那麼程式庫的版本n和版本m就具有源 相容性 2 如果沒有使用者需要重新編譯任何目標檔案，那麼版本n和版本m就具有鏈結相容性 3 如果沒有任何...