1. 程式人生 > >CSS Hack區別不同瀏覽器的寫法

CSS Hack區別不同瀏覽器的寫法

我們在開發DIV+CSS頁面時候常常會遇到開發出的網頁的一些地方在各大瀏覽器比如微軟IE6、微軟IE7、微軟IE8、火狐瀏覽器、谷歌瀏覽器有一些不同,如寬度、高度等地方有相差誤。

IE6比較老的版本瀏覽器,使用者比較多,
IE7較新瀏覽器,更接近標準瀏覽器,
IE8算是微軟標準瀏覽器,但差別於瀏覽器,
火狐(Mozilla,Firefox)和谷歌瀏覽器(chrome)是比較標準的IE瀏覽器,一般我們以這個瀏覽器為開發參考平臺,同時IE8與這兩個瀏覽器解釋CSS比較接近,一般只要通過火狐、谷歌瀏覽器測試相容,一般就能確定IE8.

因此一般我們區別這些瀏覽器CSS Hack的方法就變得簡單,我們只需考慮IE6\IE7\火狐(Firefox)這3個瀏覽器即可相容全部瀏覽器。
具體區別如下:
區別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;以下是各瀏覽器CSS hack表格

IE6

IE7

FF

*

×

!important

×

另外再補充一個,下劃線"_",
IE6支援下劃線,IE7和firefox均不支援下劃線。

於是大家還可以這樣來區分IE6,IE7,firefox: background:orange;*background:green;_background:blue;

注:不管是什麼方法,書寫的順序都是firefox的寫在前面,IE7的寫在中間,IE6的寫在最後面。

以上是介紹區別各瀏覽器的CSS hack的寫法,下面我們簡單介紹這些CSS hack用法:

要求說明:假如我們設定一個類名為exple的類 CSS屬性,CSS樣式邊框為1PX黑色邊框,高度為100PX並要求,在IE6瀏覽器下寬度為100PX;IE7瀏覽器寬度下為150PX;火狐IE8谷歌瀏覽器下寬度為200PX;(PX是長度單位畫素)

則CSS程式碼如下:
.exple{border:1px solid #000; height:100px;width:200px; *width:150px !important; *width100px;}
這樣只要在html設定一個div的類(class="exple"),這樣這部分在火狐、IE8、谷歌瀏覽器下就會顯示寬度為200px高度為100px帶1px的黑邊框的方塊;IE7瀏覽器寬度下為150PX高度為100px帶1px的黑邊框的方塊;在IE6瀏覽器下就會顯示出長度和寬度為100px的帶1px黑邊的正方形。