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; *blue;< /span>

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

2.IE6和IE7的區別：

以下是代碼片段：
background:green!important; blue;< /span>

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

3.區別IE7與FF：

以下是代碼片段：
background:orange; *background:green;

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

4.FF，IE7，IE6：

以下是代碼片段：
background:orange; *background:green!important; *blue;< /span>

　　意思是火狐瀏覽器的的背景橙色,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

轉載于:https://blog.51cto.com/lionkas/1210225

總結

以上是生活随笔為你收集整理的IE6,IE7,firefox火狐浏览器兼容性在DIV+CSS中的写法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。