當(dāng)前位置：首頁(yè) >

【荐】说说CSS Hack 和向后兼容

發(fā)布時(shí)間：2025/6/15 48 豆豆

生活随笔收集整理的這篇文章主要介紹了【荐】说说CSS Hack 和向后兼容小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

人一旦習(xí)慣了某些東西就很難去改，以及各種各樣的原因，新的瀏覽器越來(lái)越多，而老的總淘汰不了。增長(zhǎng)總是快于消亡導(dǎo)致了瀏覽器兼容是成了談不完的話題。說(shuō) 到瀏覽器兼容，CSS HACK自然而然地被我們想起。今天，我們通常都有一個(gè)團(tuán)隊(duì)或者將有一個(gè)團(tuán)隊(duì)的人在一個(gè)公司里面做相同的事，需要我們有統(tǒng)一的規(guī)范來(lái)進(jìn)行Coding，以方便維護(hù)。而解決兼容的方法就是（必須是，因?yàn)檫@才最容易有問(wèn)題的）其中一個(gè)最重要的、要解決的規(guī)范之一。

在解決兼容方法上，想定出一個(gè)統(tǒng)一的規(guī)范，個(gè)人認(rèn)為應(yīng)該以下面3點(diǎn)為基本原則：

權(quán)衡成本：在瀏覽器被淘汰后，如何快速清理掉無(wú)用代碼

可維護(hù)：在資源成本和完美間平衡的向后兼容

可讀：省力、易記

這里把成本放在了第一位，并不是說(shuō)我們不愿意追求完美，而只是，太刻意追求完美有時(shí)候可能會(huì)阻礙我們前進(jìn)；在成本后，應(yīng)該是可維護(hù)和可讀，這點(diǎn)對(duì)于團(tuán)隊(duì)的合作來(lái)說(shuō)至關(guān)重要，而最終結(jié)果也是為了減少成本。

先把這三個(gè)原則存起來(lái)，來(lái)看看我們平時(shí)解決兼容的寫法（后面會(huì)附詳細(xì)的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;}}

這種寫法的優(yōu)缺點(diǎn)是：

優(yōu)點(diǎn)：全面，各種HACK都有；清理無(wú)用代碼里易認(rèn)
缺點(diǎn)：選擇器名稱不易記；代碼量多（要重復(fù)寫選擇器）

二、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 */ }

這種寫法的優(yōu)缺點(diǎn)是：

優(yōu)點(diǎn)：易記；代碼少
缺點(diǎn)：不全面

三、IE 注釋

這種寫法的優(yōu)缺點(diǎn)是：

優(yōu)點(diǎn)：安全；向后兼容好；易維護(hù)
缺點(diǎn)：用不好會(huì)增加HTTP請(qǐng)求；用得好代碼又多

四、瀏覽器探測(cè)：JS/后端程序判斷

// 以jQuery為例，檢測(cè)是否是IE6，是則加上class="ie6" if ($.browser.msie && $.browser.version = 6 ){$('div').addClass('ie6'); }

這種寫法的優(yōu)缺點(diǎn)是：

優(yōu)點(diǎn)：全面；易維護(hù)；可讀性高
缺點(diǎn)：占資源；代碼量大（要重寫選擇器）

上面4種是我們最常用的方法。現(xiàn)在，讓我們抽出心里存著的那3個(gè)原則，看看如何選擇。要時(shí)間思考一下么？這里簡(jiǎn)單地說(shuō)一下我的選擇：

盡量使用單獨(dú)HACK這樣維護(hù)起來(lái)成本比較低，改動(dòng)不會(huì)影響其他的瀏覽器，而一旦有瀏覽器淘汰，只要搜索關(guān)鍵字，就可以批量去掉這些代碼。比如，ie6的單獨(dú)hack：_padding:6px;；

向后兼容的目標(biāo)：1年你想現(xiàn)在的網(wǎng)站兼容IE10么，誰(shuí)不想，但這可預(yù)見(jiàn)性太低了，也可以說(shuō)，成本太高了。暫時(shí)沒(méi)必要。不過(guò)，IE9可能要發(fā)布了，所以，選擇像padding:8px\0;這樣的IE8+的hack，在刪掉其他代碼不影響向后兼容上，會(huì)更好；并且，如果IE10出來(lái)，一旦支持這個(gè)hack，而又沒(méi)有這個(gè)bug，可能刪掉只影響2個(gè)瀏覽器，也會(huì)更方便；

盡可能省資源你要是不考慮頁(yè)面加載速度，不考慮服務(wù)器承受能力的話，那在向后兼容和淘汰的處理上可以做得很完美（從代碼上），但這從某種程度上，不如不做。

五、個(gè)人推薦寫法

其實(shí)可以糾結(jié)的還真多，這里結(jié)合A-Grade瀏覽器的種類和HACK的種類，寫兩種個(gè)人認(rèn)為比較合理的HACK和向后兼容相兼顧的寫法，僅供大家參考的。

經(jīng)濟(jì)實(shí)惠型寫法：注重單獨(dú)的HACK。 IE的HACK比較多，選擇省力易記的屬性HACK；其他瀏覽器HACK少，選擇塊狀的選擇器HACK(推薦)

.sofish{padding:10px;padding:9px\9; /* all ie */padding:8px\0; /* ie8-9 目前應(yīng)用于IE8的單獨(dú)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 */

準(zhǔn)完美主義寫法：配合IE注釋，一律采用選擇器HACK（選擇性推薦）

HTML: 添加body class

然后，從第二種方式我們也可以發(fā)現(xiàn)。把IE注釋用在body class上，而不是添加單獨(dú)的<link />或者@import會(huì)是更好的選擇。雖然分文件也是一種不錯(cuò)的選擇，但了為頁(yè)面加載速度，HTTP請(qǐng)求一個(gè)都不能浪費(fèi)。

至于利用JS或者后端程序來(lái)判斷，除非你有足夠的資源，除非你解決不了（90%不會(huì)發(fā)生），不然，并不推薦用。附上一個(gè)表（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 }

其他的就不多說(shuō)了。不過(guò)，還是要提醒一下: 注釋也是很重要的。雖然是HACK了，但現(xiàn)實(shí)中情況有時(shí)候比想象中的復(fù)雜得多，給代碼一個(gè)注釋，好過(guò)千言萬(wàn)語(yǔ)。

最后，還是那句，希望看到你更好的方法！