在這個時代,越來越多的網站使用CSS來控制頁面樣式,不過許多用戶使用的還是老舊的IE瀏覽器,它們對CSS的支持程度較差,甚至無法解析某些代碼。為了讓我們的網站能夠在這些瀏覽器中正常運行,我們需要在CSS中進行IE判斷。
假設我們要讓在IE6-9中打開的瀏覽器中,文字顏色為紅色,而其它瀏覽器的文字顏色為綠色(僅作為示例,實際需求可能更為復雜),我們可以這樣寫:
<style type="text/css"> /* IE6-9的CSS */ *html body { color: red; } /* 其它瀏覽器的CSS */ :root body { color: green; } </style>
上面的CSS代碼中,使用了一個IE6-9的CSS Hack技巧,即在所有瀏覽器中,只有IE瀏覽器會解析帶有*html選擇器的代碼。所以,為了讓紅色顏色只在IE6-9中顯示,我們將其寫在了這個選擇器中。
同時,為了讓其它瀏覽器中文字顏色為綠色,我們使用了:root偽類選擇器。這個偽類選擇器只有IE6以下的瀏覽器不支持,所以我們可以將其用于非IE瀏覽器的CSS樣式代碼中。
在寫IE判斷的時候,一定要注意不要濫用CSS Hack,不同的IE版本對CSS Hack的支持程度不同,有些CSS Hack甚至會引發CSS解析的bug。因此,我們應該盡量使用合法的CSS代碼,而只在必要時使用IE判斷技巧來進行樣式的調整。