解決IE6、IE7、Firefox兼容最簡單的CSS Hack

JDP

1. 
   
2. #someNode
   
3. {
   
4.     position: fixed;
   
5.    #position: fixed;
   
6.    _position: fixed;
   
7. }

複製代碼

第一排給Firefox以及其他瀏覽器看
第二排給IE7（可能以後的IE8、IE9也是如此，誰知道呢）看
第三排給IE6以及更老的版本看
最好的應用就是可以讓IE6也「支持」position:fixed，而且，配合這個原理，可以做到不引入JavaScript代碼（僅用IE6的expression），我這裡有一個現成的頁面，CSS如下寫：

1. 
   
2. #ff-r
   
3. {
   
4. position:  fixed;
   
5. _position:  absolute;
   
6. right:     15px;
   
7. top:       15px;
   
8. _top:       expression(eval(document.compatMode &&
   
9.             document.compatMode=='CSS1Compat') ?
   
10.             documentElement.scrollTop+15 :
    
11.             document.body.scrollTop +
    
12.             (document.body.clientHeight
    
13.             -this.clientHeight));
    
14. }

複製代碼

Reference: http://www.awflasher.com/blog/archives/1080

JDP

區別不同瀏覽器，CSS hack寫法：

區別IE6與FF：
       background: orange;*background:blue;

區別IE6與IE7：
       background: green !important;background:blue;

區別IE7與FF：
       background: orange; *background:green;

區別FF，IE7，IE6：
       background: orange;*background:green !important;*background:blue;

註：IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

--------------------------------------------------------------------------------
另外再補充一個，下劃線"_",
IE6支持下劃線，IE7和firefox均不支持下劃線。
於是大家還可以這樣來區分IE6，IE7，firefox
background: orange;
*background:green;
_background:blue;
註：不管是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

Reference: http://www.div-css.com/html/XHTML-CSS/hack/1136667.html

JDP

http://www.wowbox.com.tw/blog/article.asp?id=2248