別誤會(huì)，IE是不支持CSS3高級(jí)選擇器，包括最新的IE8（詳見《CSS選擇器的瀏覽器支持》），但是CSS選擇器的確是很有用的，它可以大大的簡(jiǎn)化我們的工作，提高我們的代碼效率，并讓我們很方便的制作高可維護(hù)性的頁(yè)面。
然而IE對(duì)高級(jí)CSS選擇器特別是CSS3選擇器的支持讓我們一直不能將CSS選擇器推廣應(yīng)用。不過，雖然我們無(wú)法左右瀏覽器的市場(chǎng)份額，卻可以通過一些技術(shù)改善我們的工作。我們也可以使用其它的一些技術(shù)，讓IE可以變相支持CSS3選擇器。
一位來(lái)自英國(guó)的網(wǎng)頁(yè)開發(fā)工程師Keith Clark開發(fā)了一個(gè)JavaScript方案來(lái)使IE支持CSS3選擇器。該腳本支持從IE5到IE8的各個(gè)版本。
用法
你只需要下載Robert Nyman的DOMAssistant腳本和ie-css3.js并將它們?cè)谀愕捻?yè)面的head標(biāo)簽中導(dǎo)入，如下：
<head>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</head>
支持的選擇器
ie-css3的一些限制
如何工作的?
ie-css3.js下載頁(yè)面的每一個(gè)樣式文件并解析它的CSS3偽選擇器。如果一個(gè)選擇器被找到，它就會(huì)被替換為同名的CSS class。比如： div:nth-child(2) 將會(huì)變成 div._iecss-nth-child-2 。然后，Robert Nyman的DOMAssistant用于尋找匹配元素CSS3選擇器的DOM節(jié)點(diǎn)然后將相應(yīng)的CSS類添加給它。
最終，元素的樣式表會(huì)被新的版本替代，然后用CSS3選擇器對(duì)相應(yīng)元素添加對(duì)應(yīng)的樣式。
避免IE的CSS解釋器
根據(jù)W3C的規(guī)定，一個(gè)瀏覽器應(yīng)該無(wú)視它不認(rèn)識(shí)的CSS規(guī)則。這就出現(xiàn)一個(gè)問題——我們需要利用樣式表文件中的CSS3選擇器，但是IE會(huì)將它們丟棄。
為了避免這個(gè)問題，每一個(gè)樣式文件都會(huì)通過XMLHttpRequest下載。這允許該腳本繞開瀏覽器內(nèi)置的CSS解釋器并能夠讀取原始的CSS文件。
替代方案
顯然這個(gè)也并非完美的方案，對(duì)于Ajax網(wǎng)站來(lái)說(shuō)，它基本上是不能用的，因?yàn)樵谏傻臉邮奖肀粦?yīng)用之后再改變DOM，就不會(huì)有效了。但是事實(shí)上我們可以自己來(lái)自定義一個(gè)ie-css3的。只是沒有它這個(gè)這么智能。
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
