解析IE6,IE7,火狐瀏覽器兼容性寫法

用DIV+CSS佈局的網頁在IE下顯示一切正常,可是在火狐(FireFox)瀏覽器裏打開,結果個是非常混亂……


用DIV+CSS佈局的網頁在IE下顯示一切正常,可是在火狐(FireFox)瀏覽器裏打開,結果個是非常混亂,這一定會影響到你的網站的推廣,seo優化,不利於搜所引擎的搜索,所以解決DIV+CSS瀏覽器兼容的問題是完全必須的。


IE6,IE7,firefox火狐瀏覽器兼容性在DIV+CSS中寫法


DIV+CSS 瀏覽器兼容問題一直困繞着許多從事DIV+CSS網頁排版的美工人員,尤其是IE與火狐的兼容。用DIV+CSS佈局的網頁在IE下顯示一切正常,可是在 火狐(FireFox)瀏覽器裏打開,本來好好網頁一下子就全亂了,這一定會影響到你的網站的推廣,seo優化,不利於搜所引擎的搜索,所以解決 DIV+CSS瀏覽器兼容的問題是完全必須的。


下面來看一下DIV+CSS瀏覽器兼容的實例,區分IE6,IE7,firefox火狐瀏覽器CSS的寫法:

  先來分開區分一下。

  ◆首先聲明DIV+CSS瀏覽器兼容性IE6與IE7與火狐(firefox)的一些識別規則:

  1.IE都能識別*;標準瀏覽器(如FF)不能識別*;

  2.IE6能識別*,但不能識別!important,

  3.IE7能識別*,也能識別!important;

  4.firefox不能識別*,但能識別!important;

  ◆請看下簡單的DIV+CSS瀏覽器兼容實例:

  1.IE6和firefox的區別:


以下是代碼片段:

background:orange; *background:blue;

  意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍色.

  2.IE6和IE7的區別:


以下是代碼片段:

background:green!important; background:blue;

  意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍色

  3.區別IE7與FF:


以下是代碼片段:

background:orange; *background:green;

  意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色

  4.FF,IE7,IE6:


以下是代碼片段:

background:orange; *background:green!important;*background:blue;

  意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6瀏覽器的顏色是藍色.

  爲了更加清楚的來表達說明DIV+CSS瀏覽器兼容下面表格是更加清楚的能表達IE6,IE7,FF之間的識別標識區別:

                  IE6        IE7        FF

          *        √         √          ×

      important     ×          √         √


只針對ie6,ie7和firefox的csshack


注意都要寫在正常樣式的後邊,除!important方法在前邊


---------------針對樣式名------------


如果只讓ie6看見用*html .head{color:#000;}

如果只讓ie7看見用*+html .head{color:#000;} *:first-child+html.head{color:#000;}

如果只讓ff看見用:root body .head{color:#000;}

如果只讓ff、IE8看見用html>body .head{color:#000;}


如果只是不讓ie6看見用html>body .head{color:#000;} 即對IE 6無效

如果只是不讓ff、IE8看見用*body .head{color:#000;}   即對ff、IE8無效

body>.head{color:#000}     IE7 8 ff 有效



-------------針對具體屬性--------------




如果只讓ie6看見用_    .head{_color:#000;}

如果只讓ie7看見用+與_結合的方法:    .head{+color:#f00;!;_color:#000;}



如果只是不讓ie6看見用    .head{color:#000;}注意有空格,或者用!important,寫法: width:20px!important;width:50px;

如果只對ff無效/9   >.head{color:#000\9}

--------------------------------------------------IE8正式版hack---------------------------------



"\9" 例:"margin:0px auto\9;".這裏的"\9"可以區別所有IE和FireFox.

"*" IE6、IE7可以識別.IE8、FireFox不能.

"_" IE6可以識別"_",IE7、IE8、FireFox不能.



如:.a {color:#f00;    color:#f60\9;    +color:#00FF00;   _color:#0000FF; }

         all             IE8              IE7             IE6


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章