^{<noscript id="e63cm"></noscript>}

針對不同的瀏覽器寫不同的CSS code

2020-03-24 18:23:46

字體：大中小

來源：轉載

供稿：網友

首先建站學帶你了解下什么是CSS hack：CSS hack由于不同的瀏覽器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack!我們先看下不同瀏覽器之間的區別：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和firefox均不支持下劃線。于是大家還可以這樣來區分IE6，IE7，firefox: background:orange;*background:green;_background:blue;注：不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面。以上是介紹區別各瀏覽器的CSS hack的寫法，下面我們簡單介紹這些CSS hack用法：要求說明：假如我們設置一個類名為exple的類CSS屬性,html' target='_blank'>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的類( ),這樣這部分在火狐、IE8、谷歌瀏覽器下就會顯示寬度為200px高度為100px帶1px的黑邊框的方塊；IE7瀏覽器寬度下為150PX高度為100px帶1px的黑邊框的方塊；在IE6瀏覽器下就會顯示出長度和寬度為100px的帶1px黑邊的正方形。瀏覽器優先級別:FF IE7 IE6,CSS hack書寫順序一般為FF IE7 IE6 以: " #demo {width:100px;} "為例; #demo {width:100px;} /*被FIREFOX,IE6,IE7執行.*/ * html #demo {width:120px;} /*會被IE6執行,之前的定義會被后來的覆蓋,所以#demo的寬度在IE6就為120px; */ *+html #demo {width:130px;} /*會被IE7執行*/ --------------- 所以最后,#demo的寬度在三個瀏覽器的解釋為: FIREFOX:100px; ie6:120px; ie7:130px; IE8 最新css hack： "/9" 例:"border:1px /9;".這里的"/9"可以區別所有IE和FireFox. "*" IE6、IE7可以識別.IE8、FireFox不能. "_" IE6可以識別"_",IE7、IE8、FireFox不能html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：網頁打印樣式CSS該如何操作？

下一篇：用css制作具有親和力的表格