170424-css-css hack

各種版本瀏覽器之間對(duì)css進(jìn)行解釋之后,網(wǎng)頁(yè)內(nèi)容會(huì)產(chǎn)生誤差,和js一樣,一個(gè)效果在各個(gè)版本瀏覽器中顯示不同,甚至失效。采取的不同css樣式來(lái)解決這些問(wèn)題就叫做 CSS hack。

css hack大致可以分為三種表現(xiàn)形式

1. css屬性前綴法

\9:所有IE瀏覽器都支持

_和-:僅IE6支持

*:IE6、E7支持

\0:IE8、IE9支持,opera部分支持

\9\0:IE8部分支持、IE9支持

\0\9:IE8、IE9支持


Demo1

.hack{

/*demo1?注意順序,否則IE6/7下可能無(wú)法正確顯示,導(dǎo)致結(jié)果顯示為白色背景*/

background-color:red;/*?All?browsers?*/

background-color:blue!important;/*?All?browsers?but?IE6?*/

*background-color:black;/*?IE6,?IE7?*/

+background-color:yellow;/*?IE6,?IE7*/

background-color:gray\9;/*?IE6,?IE7,?IE8,?IE9,?IE10?*/

background-color:purple\0;/*?IE8,?IE9,?IE10?*/

background-color:orange\9\0;/*IE9,?IE10*/

_background-color:green;/*?Only?works?in?IE6?*/

*+background-color:pink;/*??WARNING:?Only?works?in?IE7????*/

}

Demo2


.iehack{

background-color:orange;/*?all?-?for?Firefox/Chrome?*/

background-color:red\0;/*?ie?8/9/10/Opera?-?for?ie8/ie10/Opera?*/

background-color:blue\9\0;/*?ie?9/10?-?for?ie9/10?*/

*background-color:black;/*?ie?6/7?-?for?ie7?*/

_background-color:green;/*?ie?6?-?for?ie6?*/

}



2. 選擇器前綴法

選擇器前綴法,例如IE6能識(shí)別*html .class{},IE7能識(shí)別*+html .class{}

??為什么和css屬性前綴 不一致

@media screen\9{...}只對(duì)IE6/7生效

@media \0screen {body { background: red; }}只對(duì)IE8有效

@media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效

@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效

3. IE條件注釋法

對(duì)所有判斷語(yǔ)句內(nèi)的代碼生效(不僅只有css)

針對(duì)所有ie(ie10+已經(jīng)不再支持)

<!--[if IE]>ie瀏覽器顯示內(nèi)容<![endif]-->

<!--[if lt IE 6]>ie6以下顯示的內(nèi)容<![endif]-->

<!--[if gte IE 6]>這段文字只在IE6以上(包括)版本IE瀏覽器顯示<![endif]-->

這段文字只在IE6以上(包括)版本IE瀏覽器顯示這段文字只在IE6以上(包括)版本IE瀏覽器顯示<!--[if IE 6]>在IE6瀏覽器顯示<![endif]-->

<!--[if ! IE 8]>在非IE8瀏覽器顯示<![endif]-->

<!--[if !IE]>在非ie瀏覽器<![endif]-->

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容