用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