IE10的CSS技巧

文章出自：IT屌絲-碼農之家

微軟宣佈IE10 將不支持條件註釋。他們的歷史，這顯然是一個冒險的舉動。截至目前，針對古怪的行爲在IE6-9，開發人員已經使用條件的意見，有條件的類，以及其餘IE特定的hack。

可是，若是沒有條件在IE10的意見，惟一的選擇，咱們針對CSS問題是Hack或瀏覽器嗅探 - 咱們固然不但願訴諸後者留下。

IE10專門使用一個Hack。下面是這技術的總結，供參考。

方法1:
特徵檢測@ cc_on
腳本里面是不包括一個IE的條件註釋，以確保IE6-9不認可它，那麼它的特色是檢測一種叫作 @ cc_on 。在這裏，它是：

1. <!--[if !IE]><!--><script>  
   
2. if (/*@cc_on!@*/false) {  
   
3.     document.documentElement.className+=' ie10';  
   
4. }  
   
5. </script><!--<![endif]-->  

複製代碼

請注意/*@cc_on ! @*/中間的這個感嘆號；這樣就能夠在ie10中給html元素添加一個class=」ie10″。而後在你的CSS，只須要使用「IE10」類：

1. .ie10 .example {  
   
2.    /* IE10-only styles go here */  
   
3. }  

複製代碼

好吧，其實不知道IE11會不會繼續支持這個私有語句，若是是的話，就比較難區分IE10和IE11了。

須要注意的是，條件編譯不支持Windows Store中的App中使用，只支持在IE10瀏覽器中使用。

固然，咱們也能夠用傳統的用ua給IE10中html元素添加class的方法來實現。

方法2:
@media -ms-high-contrast Hack
IE10支持媒體查詢，也支持-ms-high-contrast這個屬性，因此，咱們能夠用它來hack IE10：

1. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   
2.    /* IE10-specific styles go here */  
   
3. }  

複製代碼

最終這一條多是最好的選擇，但也許不是如今。最後，IE9用戶都應該獲得通知經過Windows Update升級到IE10。這應該是包括Windows 7用戶。若是發生這種狀況，IE9的市場份額最終將被接管的IE10，以一樣的方式發生這種狀況與其餘瀏覽器自動更新。

除此以外，若是這個分析錯誤是固定的IE11，那麼，這意味着它也將是將來的證實。但咱們不會知道，直到被釋放IE11。

方法3:
@media Zero Hack
這個有些BT了，並且不是很完美，由於IE9也支持media，也支持\0這個hack：

1. @media screen and (min-width:0\0) {  
   
2.     /* IE9 and IE10 rule sets go here */  
   
3. }

複製代碼

如今的windows 7中的ie9已經能夠升級到ie10了，相信要不了多久IE10就會代替IE9;