css3相容IE8的方案 各個ie的hack

2021-08-04 09:50:28 字數 1910 閱讀 6082

雖然現在很多專案已經對低版本ie不要求了,但是還有部分公司對ie8還是很執著的,咱作為屌絲前端程式設計師不能和老闆說前端潮流,不能說趨勢,只能動腦子了,下面就分享一些css3相容ie8的方案思路。主要是實現彎道超車。

比如css3的nth-child選擇器,它有多好用就不解析了,問題它不相容ie8,怎麼破呢?

1.用jq選擇器實現彎道超車,比如我想選擇前面五個li,可以這樣選。$(「li:nth-child(-n+5)」).css().這樣就利用jq實現了相容,但是能用css解決的就盡力不用js,所以有了方案二

2.利用ie8支援first-child來選擇第乙個,利用ie8支援相鄰選擇器來選第二個第三個,選擇第二個,li:first-child + li, 同理,第三個可以這樣選:li:first-child +li +li;

上面兩個案例主要是講了兩種思路,一種是利用js,一種是利用ie8支援的選擇器通過變形來達到相同的效果,但是還有一點小缺陷,比如在谷歌裡面會把這種只要在ie8裡面才需要起效的css也會渲染出來,作為乙個強迫症患者前端來講這是不能忽略的,所以接下來介紹一下各個ie的hack。

只在ie下生效

只在ie6下生效

只在ie6以上版本生效

只在ie8上不生效

非ie瀏覽器生效

ie瀏覽器各版本 css hack 對照表

hack

寫法例項

ie6(s)

ie6(q)

ie7(s)

ie7(q)

ie8(s)

ie8(q)

ie9(s)

ie9(q)

ie10(s)

ie10(q)

**color青色y

yyyn

ynyn

y++color綠色y

yyyn

ynyn

y--color黃色y

ynnn

nnnn

n__color藍色y

ynyn

ynyn

n#color紫色y

yyyn

ynyn

y\0color:red\0紅色n

nnny

nyny

n\9\0

color:red\9\0粉色n

nnnn

nyny

n!important

color:blue !important;color:green;棕色n

nyny

nyny

y 說明:在標準模式中

「-″減號是ie6專有的hack

「\9″ ie6/ie7/ie8/ie9/ie10都生效

「\0″ ie8/ie9/ie10都生效,是ie8/9/10的hack

「\9\0″ 只對ie9/ie10生效,是ie9/10的hack

css hack方式三:選擇器字首法

選擇器字首法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器,在css選擇器前加上一些只有某些特定瀏覽器才能識別的字首進行hack。

目前最常見的是

html 字首只對ie6生效

+html +字首只對ie7生效

@media screen\9只對ie6/7生效

@media \0screen }只對ie8有效

@media \0screen,screen\9}只對ie6/7/8有效

@media screen\0 } 只對ie8/9/10有效

@media screen and (min-width:0\0) } 只對ie9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) } 只對ie10有效

ps:hack雖好,可不要濫用哦,能不用盡量不用

CSS3背景色透明 相容IE8

標準瀏覽器通過rgba 實現背景色透明 ie8以下瀏覽器通過特有濾鏡實現背景色透明。如下 1 1 ie8 2 2 filter progid dximagetransform.microsoft.gradient startcolorstr 7f000000,endcolorstr 7f000000...

Css實現透明效果,相容IE8

css實現透明效果,相容ie8 蕃薯耀 2015年9月9日 17 39 24 星期三 background rgba 0,0,0,0.2 none repeat scroll 0 0 important background color 000 opacity 0.3 filter alpha op...

CSS相容 解決IE6 IE7和IE8的相容問題

css相容 如何解決ie6 ie7和ie8的相容問題,有時做網頁明明css樣式表是正常的但ie8不相容,網頁顯示不正常,css如何相容ie8呢,下面看解決辦法 ie6 ie7 firefox等瀏覽器的相容性問題讓網頁設計師們大傷腦筋,本來網頁設計是件很有趣的事情,但是卻被這多餘相容工作傷腦筋,特別是...