史上最全的CSS hack方式一覽

2021-08-08 15:30:26 字數 3813 閱讀 3021

由於不同廠商的流覽器或某瀏覽器的不同版本(如ie6-ie11,firefox/safari/opera/chrome等),對css的支援、解析不一樣,導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時,我們為了獲得統一的頁面效果,就需要針對不同的瀏覽器或不同版本寫特定的css樣式,我們把這個針對不同的瀏覽器/不同版本寫相應的css code的過程,叫做css hack!

由於不同的瀏覽器和瀏覽器各版本對css的支援及解析結果不一樣,以及css優先順序對瀏覽器展現效果的影響,我們可以據此針對不同的瀏覽器情景來應用不同的css。

css hack大致有3種表現形式,css屬性字首法、選擇器字首法以及ie條件注釋法(即html頭部引用if ie)hack,實際專案中css hack大部分是針對ie瀏覽器不同版本之間的表現差異而引入的。

屬性字首法(即類內部hack):例如 ie6能識別下劃線"_"和星號" * ",ie7能識別星號" * ",但不能識別下劃線"_",ie6~ie10都認識"\9",但firefox前述三個都不能認識,但能識別!important。

選擇器字首法(即選擇器hack):例如 ie6能識別*html .class{},ie7能識別*+html .class{}或者*:first-child+html .class{}。

ie條件注釋法(即html條件注釋hack):針對所有ie(注:ie10+已經不再支援條件注釋): ,針對ie6及以下版本: 。這類hack不僅對css生效,對寫在判斷語句裡面的所有**都會生效。

css hack書寫順序

一般是將適用範圍廣、被識別能力強的css定義在前面。

這種方式是ie瀏覽器專有的hack方式,微軟官方推薦使用的hack方式。舉例如下

只在ie下生效		

只在ie6下生效

只在ie6以上版本生效

只在ie8上不生效

非ie瀏覽器生效

屬性字首法是在css樣式屬性名前加上一些只有特定瀏覽器才能識別的hack字首,以達到預期的頁面展現效果。

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

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 說明:在標準模式中

demo如下

[css]view plain

copy

demo1是測試不同ie瀏覽器下hack 的顯示效果

ie6顯示為:粉色,

ie7顯示為:粉色,

ie8顯示為:藍色,

ie9顯示為:藍色,

firefox/chrome/opera顯示為:藍色,

若去掉其中的!important屬性定義,則ie6/7仍然是粉色,ie8是紫色,ie9/10為橙色,firefox/chrome變為紅色,opera是紫色。是不是有些奇怪:除了ie6以外,其他所有的表現都符合我們的期待。那為何ie6表現的顏色不是_background-color:green;的綠色而是*+background-color:pink的粉色呢?其實是最後一句所謂的ie7私有hack惹的禍?不是說*+是ie7的專有hack嗎???錯,你可能太粗心了!我們常說的ie7專有*+hack的格式是*+html selector,而不是上面的直接在屬性上加*+字首。如果是為ie7定製特殊樣式,應該這樣使用:

*+html #ie7test
經過測試,我發現屬性字首*+background-color:pink;只有ie6和ie7認識。而*+html selector只有ie7認識。所以我們在使用時候一定要特別注意。

demo2例項是用於區分標準模式下ie6~ie9和firefox/chrome的hack,注意順序

ie6顯示為:綠色,

ie7顯示為:黑色,

ie8顯示為:紅色,

ie9顯示為:藍色,

firefox/chrome顯示為:橘色,

(本例ie10效果同ie9,opera最新版效果同ie8)

demo3例項也是用於區分標準模式下ie6~ie9和firefox/chrome的hack,注意順序

ie6顯示為:紅色,

ie7顯示為:藍色,

ie8顯示為:綠色,

ie9顯示為:粉色,

firefox/chrome顯示為:橘色,

(本例ie10效果同ie9,opera最新版效果也同ie9為粉色)

demo4例項是用於區分標準模式下ie6~ie10和opera/firefox/chrome的hack,本例特別要注意順序

ie6顯示為:橘色,

ie7顯示為:粉色,

ie8顯示為:黃色,

ie9顯示為:紫色,

ie10顯示為:綠色,

firefox顯示為:藍色,

opera顯示為:黑色,

safari/chrome顯示為:灰色,

選擇器字首法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器,在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有效

一般情況下,我們盡量避免使用css hack,但是有些情況為了顧及使用者體驗實現向下相容,不得已才使用hack。比如由於ie8及以下版本不支援css3,而我們的專案頁面使用了大量css3新屬性在ie9/firefox/chrome下正常渲染,這種情況下如果不使用css3pie或htc或條件注釋等方法時,可能就得讓ie8-的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處,但過多的濫用會造成html文件混亂不堪,增加管理和維護的負擔。相信只要大家一起努力,少用、慎用hack,未來一定會促使瀏覽器廠商的標準越來越趨於統一,順利過渡到標準瀏覽器的主流時代。拋棄那些陳舊的ie hack,必將減輕我們編碼的複雜度,少做無用功。

史上最全css hack方式一覽

史上最全 Css Hack彙總

每次要找個東西都得慢慢去翻自己收集的一些東西,每次都是那麼花時間,再加上有時存放時間久遠就忘了當時是存在哪了,為了方便查詢及閱讀,決定把一些csshack 收集起來.1.區別不同瀏覽器,css hack寫法 區別ie6 與ff background orange background blue 區別...

史上最全面的spring講解(一)

如果僅使用了支援servlet2.4以前規範的web容器,則該容器不支援listener規範,故無法使用這種配置,可以使用filter配置方式,我們可以在web應用的web.xml增加如下filter配置 requestcontextfilter org.springframework.web.fi...

史上最全的郵箱測試方法!

前言 我們在以後的測試工作中,可能或多或少的會要去測試關於郵箱位址的功能,不管是登入,還是註冊,還是繫結郵箱位址。那麼首先,我們得了解一下郵箱位址的組成 郵箱名 網域名稱 例如 3343787213 qq.com 例如 ya.meng 163.com 例如 ya yameng gmail.com 那...