這篇文章將為大家詳細(xì)講解有關(guān)CSS hacker怎么用,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
為景東等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù),及景東網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、成都做網(wǎng)站、景東網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
什么是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)資料,推薦查看這篇文章(https://www.cdcxhl.com/css/493362.html)。
這行代碼是永遠(yuǎn)以最新的IE版本模式來(lái)顯示網(wǎng)頁(yè),使IE支持HTML5。
這行代碼是360瀏覽器渲染頁(yè)面需默認(rèn)用極速內(nèi)核
各瀏覽器CSS兼容問(wèn)題匯總:https://www.cdcxhl.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è),下劃線"_",
IE6支持下劃線,IE7、IE8和Firefox、Opera、Safari均不支持下劃線。
整理二:IE6,IE7,FireFox,Opera,Safari兼容CSS的解決方法及CSS差別
IE6,IE7,FireFox,Opera,Safari兼容CSS的解決方法及CSS差別
參考網(wǎng)址:http://shouce.jb51.net/csshack/
以下兩種方法幾乎能解決現(xiàn)今所有HACK:
1. !important
隨著IE7對(duì)!important的支持, !important 方法現(xiàn)在只針對(duì)IE6的HACK.(注意寫(xiě)法.記得該聲明位置需要提前.)
2. IE6/IE7對(duì)FireFox
*+html 與 *html 是IE特有的標(biāo)簽, firefox 暫不支持.而*+html 又為 IE7特有標(biāo)簽.
3.當(dāng)網(wǎng)頁(yè)在 IE 中有異常表現(xiàn)時(shí),可以嘗試激發(fā) haslayout 來(lái)看看是不是問(wèn)題所在。常用的方法是給某元素 css 設(shè)定 zoom:1。使用 zoom:1 是因?yàn)榇蠖鄶?shù)情況下,它能在不影響現(xiàn)有環(huán)境的條件下激發(fā)元素的 haslayout。而一旦問(wèn)題消失,那基本上就可以判斷是haslayout 的原因。然后就可以通過(guò)設(shè)定相應(yīng)的 css 屬性來(lái)對(duì)這個(gè)問(wèn)題進(jìn)行修正了。建議首先要考慮的是設(shè)定元素的width/height 屬性,其次再考慮其他屬性。
對(duì) IE6 及更早版本來(lái)說(shuō),常用的方法被稱為霍莉破解(Holly hack),即設(shè)定這個(gè)元素的高度為 1%(height:1%;)。需要注意的是,當(dāng)這個(gè)元素的 overflow 屬性被設(shè)置為 visible 時(shí),這個(gè)方法就失效了。或者使用 IE的條件注釋。對(duì) IE7 來(lái)說(shuō),最好的方法是設(shè)置元素的最小高度為 0 (min-height:0;)。
4.ie-css3.htc讓IE6, 7, 8也支持CSS3圓角,陰影,文本陰影等效果。
附網(wǎng)址:https://www.cdcxhl.com/css/63281.html
5.在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法:div{margin:30px!important;margin:28px;},注意這兩個(gè)margin的順序一定不能寫(xiě)反,據(jù)阿捷的說(shuō)法!important這個(gè)屬性IE不能識(shí)別,但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣:div{maring:30px;margin:28px;}
重復(fù)定義的話按照最后一個(gè)來(lái)執(zhí)行,所以不可以只寫(xiě)margin:XXpx!important;
6.設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6都存在的bug。解決方案是在這個(gè)div里面加上display:inline。
7.min-width是個(gè)非常方便的CSS命令,它可以指定元素最小也不能小于某個(gè)寬度,這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè),而它實(shí)際上把 width當(dāng)做最小寬度來(lái)使。為了讓這一命令在IE上也能用,可以把一個(gè)
放到 標(biāo)簽下,然后為 div指定一個(gè)類(lèi):
然后CSS這樣設(shè)計(jì):
selector{
min-width:600px;
_width:expressio n(document.body.clientWidth < 600?"600px":"auto");
}
或selector {
min-height:500px;
height:auto !important;
height:500px;
}
8.ie下元素消失,給該元素添加:position:relative;
9.IE7瀏覽器下,文字越多,按鈕兩側(cè)padding留白就越大,解決辦法是添加overflow:visible屬性。
關(guān)于“CSS hacker怎么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。