不同瀏覽器相容性 常用的CSS Hack技術

2021-07-30 17:03:24 字數 2412 閱讀 1532

一、什麼是csshack?

不同的瀏覽器對css的解析結果是不同的,因此會導致相同的css輸出的頁面效果不同,這就需要css hack來解決瀏覽器區域性的相容性問題。而這個針對不同的瀏覽器寫不同的css **的過程,就叫css hack。

css hack

常見的有三種形式:css屬性hack、css選擇符hack以及ie條件注釋hack, hack主要針對ie瀏覽器。

1、屬性級hack:比如ie6能識別下劃線」」和星號」 「,ie7能識別星號」 「,但不能識別下劃線」」,而firefox兩個都不能認識。

2、選擇符級hack:比如ie6能識別html .class{},ie7能識別+html.class{}或者*:first-child+html .class{}。

3、ie條件注釋hack:ie條件注釋是微軟從ie5開始就提供的一種非標準邏輯語句。比如針對所有ie:,針對ie7以下版本:,這類hack不僅對css生效,對寫在判斷語句裡面的所有**都會生效。

ps:條件注釋只有在ie瀏覽器下才能執行,這個**在非ie瀏覽下被當做注釋視而不見。可以通過ie條件注釋載入不同的css、js、html和伺服器**等。

二、常用的csshack

/* css

屬性級hack */

color:red;

/* 所有瀏覽器可識別*/

_color:red;

/* 

僅ie6 識別 */

*color:red;

/* ie6

、ie7識別 */

+color:red;

/* ie6

、ie7識別 */

*+color:red;

/* ie6

、ie7識別 */

[color:red;

/* ie6

、ie7識別 */

color:red\9;

/* ie6

、ie7、ie8、ie9識別 */

color:red\0;

/* ie8

、ie9 識別*/

color:red\9\0;

/* 僅ie9識別 */

color:red \0;

/* 僅ie9識別 */

color:red!important;

/* ie6

不識別!important*/

/* css

選擇符級hack */

*html #demo    /* 

僅ie6 識別 */

*+html #demo   /* 

僅ie7 識別 */

body:nth-of-type(1)

#demo /* ie9+

、ff3.5+、chrome、safari、opera 可以識別 */

head:first-child+body #demo /* ie7+

、ff、chrome、safari、opera 可以識別 */

:root #demo : /*

僅ie9識別 */

/* ie

條件注釋hack */

三、ie6對!important的支援

!important

一般用來做區分ie6和firefox等瀏覽器的基本hack手法。因為ie6不支援!important,而firefox能讀懂!important,其改變了樣式的優先順序。其實ie6在某些情況下,也能認識!important。

例如:

class

="demo"

>www.ido321.com

上面**在ff下字型為紅色、ie6下字型為綠色。說明ie6忽視!important的存在。

再來看看:

class

="demo"

>www.ido321.com

如果ie6不認!important的話,上面**.demo的內容應該顯示為綠色,可偏偏不是,.demo的內容顯示為紅色,說明ie6是認得!important的。

兩種情況的區別就在於:當在乙個選擇器中,利用!important改變樣式優先順序的時候,ie6下是無效的,後面的樣式覆蓋了前面的,!important被徹底無視了,利用!import

四、ie6下的多選擇符

多類選擇符的寫法。例如:

#my.c1.c2

.c1.c2

以上寫法在ie7+/ff/opera/safari 等瀏覽器都支援。

但在ie6中,後乙個類名會覆蓋前乙個類名,也就是說,上例被ie6理解為:

#my.c2

.c2

同理:#my.c1.c2.c3

ie6理解為 

#my.c3

.c1.c2.c3

ie6理解為 .c3

所以開發中用多類來組合實現css效果的時候,注意ie6的這個問題。最好的方法就是,不要用類組合的形式。

區別不同瀏覽器的相容性

現在谷歌瀏覽器已經被很多使用者認可,不僅僅是它的外觀簡潔,而且功能也很強大,對於我們常常寫css的站長來說不僅要照顧谷歌瀏覽器,還要照顧各個主流的瀏覽器,有時候在按照常理寫css的時候其他瀏覽都相容某段css但是谷歌死活不相容我們要怎麼來做呢?我們知道各種瀏覽器都有他特殊區分的hack,比如我們要區...

瀏覽器相容性

瀏覽器相容性是乙個很長久的話題,之所以前端需要面對瀏覽器相容性,是因為使用者的環境有不同的平台,不同的瀏覽器。不同的廠商之間為了相互競爭,對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本,不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...

瀏覽器相容性

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...