彩色筆小沛的知識庫

 找回密碼
 註冊
搜索
查看: 4509|回復: 2

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

[複製鏈接]
發表於 2008-8-26 17:15:10 | 顯示全部樓層 |閱讀模式

  1. #someNode
  2. {
  3.     position: fixed;
  4.    #position: fixed;
  5.    _position: fixed;
  6. }
複製代碼
第一排給Firefox以及其他瀏覽器看
第二排給IE7(可能以後的IE8、IE9也是如此,誰知道呢)看
第三排給IE6以及更老的版本看
最好的應用就是可以讓IE6也「支持」position:fixed,而且,配合這個原理,可以做到不引入JavaScript代碼(僅用IE6的expression),我這裡有一個現成的頁面,CSS如下寫:

  1. #ff-r
  2. {
  3. position:  fixed;
  4. _position:  absolute;
  5. right:     15px;
  6. top:       15px;
  7. _top:       expression(eval(document.compatMode &&
  8.             document.compatMode=='CSS1Compat') ?
  9.             documentElement.scrollTop+15 :
  10.             document.body.scrollTop +
  11.             (document.body.clientHeight
  12.             -this.clientHeight));
  13. }
複製代碼
Reference: http://www.awflasher.com/blog/archives/1080
 樓主| 發表於 2008-8-26 17:21:51 | 顯示全部樓層

CSS hack:區分IE6,IE7,firefox

區別不同瀏覽器,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;

IE6IE7FF
*×
!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
 樓主| 發表於 2008-8-26 17:23:13 | 顯示全部樓層

CSS兼容IE6,IE7,FireFox之一

您需要登錄後才可以回帖 登錄 | 註冊

本版積分規則

Archiver|手機版|彩色筆小沛的知識庫

GMT+8, 2019-11-12 15:59 , Processed in 0.020523 second(s), 8 queries , MemCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回復 返回頂部 返回列表