什么是CSS hack
由于不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對(duì)CSS的支持、解析不一樣,導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁(yè)面展現(xiàn)效果。這時(shí),我們?yōu)榱双@得統(tǒng)一的頁(yè)面效果,就需要針對(duì)不同的瀏覽器或不同版本寫(xiě)特定的CSS樣式,我們把這個(gè)針對(duì)不同的瀏覽器/不同版本寫(xiě)相應(yīng)的CSS code的過(guò)程,叫做CSS hack!
CSS hack的原理
由于不同的瀏覽器和瀏覽器各版本對(duì)CSS的支持及解析結(jié)果不一樣,以及CSS優(yōu)先級(jí)對(duì)瀏覽器展現(xiàn)效果的影響,我們可以據(jù)此針對(duì)不同的瀏覽器情景來(lái)應(yīng)用不同的CSS。
如果想系統(tǒng)的學(xué)習(xí)css hacker的相關(guān)資料,推薦查看這篇文章(http://www.survivalescaperooms.com/css/493362.html)。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">這行代碼是永遠(yuǎn)以最新的IE版本模式來(lái)顯示網(wǎng)頁(yè),使IE支持HTML5。
<meta name="renderer" content="webkit">這行代碼是360瀏覽器渲染頁(yè)面需默認(rèn)用極速內(nèi)核
<!–[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js">
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js">
<![endif]–>
各瀏覽器CSS兼容問(wèn)題匯總:http://www.survivalescaperooms.com/css/9707.html
條件樣式替代CSS Hacks方案:http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
建議:使用ietester軟件測(cè)試IE6、7、8。
顧名思義,!important的優(yōu)先級(jí)要高. 舉例說(shuō)明:
body
{
background-color:#FF0000 !important;
*background-color:#00FF00 !important;
*background-color:#0000FF;
background-color:#000000;
}
IE6選擇最后一個(gè),即: (因?yàn)镮E6對(duì)important不感冒)
IE7選擇第二個(gè),即:background-color:#000000;(因?yàn)镮E7開(kāi)始對(duì)important感冒了,同時(shí)還死守著它對(duì) * 感情的最后一版本,但important并未起到優(yōu)先級(jí)的作用)
IE8和Firefox、Opera、Safari選擇第一個(gè),即:!important;(IE8完全感冒于important,同時(shí)丟棄了對(duì)*的感情)
另外再補(bǔ)充一個(gè),下劃線(xiàn)"_",
IE6支持下劃線(xiàn),IE7、IE8和Firefox、Opera、Safari均不支持下劃線(xiàn)。
整理二:IE6,IE7,FireFox,Opera,Safari兼容CSS的解決方法及CSS差別
IE6,IE7,FireFox,Opera,Safari兼容CSS的解決方法及CSS差別
參考網(wǎng)址:http://shouce.Vevb.com/csshack/
以下兩種方法幾乎能解決現(xiàn)今所有HACK:
1. !important
隨著IE7對(duì)!important的支持, !important 方法現(xiàn)在只針對(duì)IE6的HACK.(注意寫(xiě)法.記得該聲明位置需要提前.)
新聞熱點(diǎn)
疑難解答
圖片精選