Different version of IE using CSS 不同版本的CSS寫法…)

網路上實在是太多假資料了…趁有記憶時寫一下好了

首先先推薦一下這個 :IE detctor  這大概是我目前看到最完整的css 版IE 測試器了

http://www.fantxi.com/demo/html/browser_detector.html

(用法：直接view source)

 

簡單說： 分為

為了IE的CSS真的很麻煩…居然還有針對IE8 Beta，還有IE simulator的寫法：

 

1: IE6 only

2: IE7 only

3: IE6.7 only

4: IE8以上support

5: IE 8 only  (記錄上次的bug)

 

都還滿簡單的：

最麻煩的是當你只要給IE8，但你不要給IE9的CSS

 

因為沒有特別為它寫一個： 所以要用很特別很特別的hack方法：

IE6 only:  底線： ex: _background:#F00;

IE6 & 7 only: * ex: *background:#AAA;

IE8 以上： \9：

ex background:red \9;

IE9 only (未測試IE10吃不吃… ) :root

 

:root #example { background:#963\0 }/*IE9 only*/

 

有些特定的寫法... CSS是有先後順序的： 後面的會蓋掉前面的...

因此：

 

IE8only的寫法是要：

 

.title {background: red \9; } /* IE8 only*/

:root .title {background: black} /* IE9 only*/

在IE8之後，再把IE9以上的overwrite掉…才不會出問題。 (目前沒有找到可以一行解決的方法)

 

因此只要給IE7也是一樣…要先寫ie7的東西 然後再寫IE6的寫法把它overwrite掉

(好像可以使用+來處理… 但我懶得測... 下次又要寫萬惡IE時再來補上

 

真是討厭的寫法啊~~~

 

其他的也是一樣…很多先後順序的問題…IE7 only似乎也是要這樣子寫... 要注意先後順序。

 

 

然後有一件事要注意：有些手機似乎檔案是先抓到就先讀…不管在source html的檔案順序....

因此有優先順序的CSS最好寫在同一個檔案裡面

 

 

 

---

google陷阱： 網路上很多都會說\9是用來區分FF跟IE的，也有人說是用來讓IE8 only的

 

個人猜測寫這個的時候，應該是在IE9未出來前所寫的…

然後不知道誰起得頭…後來大家就一直抄他的了@@

 

事實上是\9會給 IE8以上的機器吃… 並不限於IE8而已。

 

要用英文查比較查得到正確資料。

 

 

以後等有IE10的機器再來補上~~