關(guān)于CSS對(duì)各個(gè)瀏覽器兼容已經(jīng)是老生常談的問題了, 網(wǎng)絡(luò)上的教程遍地都是.以下內(nèi)容沒有太多新穎, 純屬個(gè)人總結(jié), 希望能對(duì)初學(xué)者有一定的幫助. 一、CSS HACK HACK概念: 不同的瀏覽器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,對(duì)CSS的解析認(rèn)識(shí)不一樣,因此會(huì)導(dǎo)致生成的頁面效果不一樣,得不到我們所需要的頁面效果。這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS,讓它能夠同時(shí)兼容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果。這個(gè)針對(duì)不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack, HACK規(guī)則: IE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*;IE6能識(shí)別*,但不能識(shí)別 !important;IE7能識(shí)別*,也能識(shí)別!important;FF不能識(shí)別*,但能識(shí)別!important;
瀏覽器優(yōu)先級(jí)別:FF<IE7<IE6,CSS hack書寫順序一般為FF IE7 IE6 例: 以: " #demo {width:100px;} "為例; #demo {width:100px;} * html #demo {width:120px;} *+html #demo {width:130px;} --------------- 所以最后,#demo的寬度在三個(gè)瀏覽器的解釋為: FIREFOX:100px; ie6:120px;ie7:130px;以下兩種方法幾乎能解決現(xiàn)今所有HACK. 1, !important 隨著IE7對(duì)!important的支持, !important 方法現(xiàn)在只針對(duì)IE6的HACK.(注意寫法.記得該聲明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } </style> 2, IE6/IE77對(duì)FireFox *+html 與 *html 是IE特有的標(biāo)簽, firefox 暫不支持.而*+html 又為 IE7特有標(biāo)簽. <style> #wrapper { #wrapper { width: 120px; } /* FireFox */ *html #wrapper { width: 80px;} /* ie6 fixed */ *+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */ } </style> 注意: *+html 對(duì)IE7的HACK 必須保證HTML頂部有如下聲明: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 二、萬能 float 閉合 關(guān)于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup] 將以下代碼加入Global CSS 中,給需要閉合的div加上 class="clearfix" 即可,屢試不爽. <style> /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ </style>