【荐】说说CSS Hack 和向后兼容
人一旦習慣了某些東西就很難去改，以及各種各樣的原因，新的瀏覽器越來越多，而老的總淘汰不了。增長總是快于消亡導致了瀏覽器兼容是成了談不完的話題。說 到瀏覽器兼容，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) {head~body .sofish{display:block;}}這種寫法的優缺點是：
- 優點：全面，各種HACK都有；清理無用代碼里易認
- 缺點：選擇器名稱不易記；代碼量多（要重復寫選擇器）
二、CSS 屬性 Hack
.sofish{padding:10px;padding:9px\9; /* all ie */padding:8px\0; /* ie8-9 */*padding:5px; /* ie6-7 */+padding:7px; /* ie7 */_padding:6px; /* ie6 */ }這種寫法的優缺點是：
- 優點：易記；代碼少
- 缺點：不全面
三、IE 注釋
<!--[if IE]>IE only<![endif]--> <!--[if !IE]>NOT IE<![endif]-->這種寫法的優缺點是：
- 優點：安全；向后兼容好；易維護
- 缺點：用不好會增加HTTP請求；用得好代碼又多
四、瀏覽器探測：JS/后端程序判斷
// 以jQuery為例，檢測是否是IE6，是則加上class="ie6" if ($.browser.msie && $.browser.version = 6 ){$('div').addClass('ie6'); }這種寫法的優缺點是：
- 優點：全面；易維護；可讀性高
- 缺點：占資源；代碼量大（要重寫選擇器）
上面4種是我們最常用的方法。現在，讓我們抽出心里存著的那3個原則，看看如何選擇。要時間思考一下么？這里簡單地說一下我的選擇：
五、個人推薦寫法
其實可以糾結的還真多，這里結合A-Grade瀏覽器的種類和HACK的種類，寫兩種個人認為比較合理的HACK和向后兼容相兼顧的寫法，僅供大家參考的。
經濟實惠型寫法：注重單獨的HACK。 IE的HACK比較多，選擇省力易記的屬性HACK；其他瀏覽器HACK少，選擇塊狀的選擇器HACK(推薦)
.sofish{padding:10px;padding:9px\9; /* all ie */padding:8px\0; /* ie8-9 目前應用于IE8的單獨hack，情況比較少 */*padding:5px; /* ie6-7 */+padding:7px; /* ie7 */_padding:6px; /* ie6 */ } /* webkit and opera */ @media all and (min-width: 0px){ .sofish{padding:11px;} } /* webkit */ @media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } /* opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } /* firefox * / @-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */ html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */準完美主義寫法：配合IE注釋，一律采用選擇器HACK（選擇性推薦）
HTML: 添加body class
<!--[if IE6]><body class="ie6"><![endif]--> <!--[if IE7]><body class="ie7"><![endif]--> <!--[if IE8]><body class="ie8"><![endif]--> <!--[if IE9]><body class="ie9"><![endif]--> <!--[if !IE]><body class="non-ie"><![endif]-->然后，從第二種方式我們也可以發現。把IE注釋用在body class上，而不是添加單獨的<link />或者@import會是更好的選擇。雖然分文件也是一種不錯的選擇，但了為頁面加載速度，HTTP請求一個都不能浪費。
至于利用JS或者后端程序來判斷，除非你有足夠的資源，除非你解決不了（90%不會發生），不然，并不推薦用。附上一個表（via），可以參考參考：
六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：
/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } 或 *html #uno { color: red } /* IE7 */ *+html #dieciocho {color: red } 或 *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #cuatro { color: red } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) {#diez { color: red } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) {#veintiseis { color: red } } /* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */ :root *> #quince { color: red } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red }其他的就不多說了。不過，還是要提醒一下: 注釋也是很重要的。雖然是HACK了，但現實中情況有時候比想象中的復雜得多，給代碼一個注釋，好過千言萬語。
最后，還是那句，希望看到你更好的方法！
總結
以上是生活随笔為你收集整理的【荐】说说CSS Hack 和向后兼容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【spring 配置文件】spring
- 下一篇： Execute Process Task