瀏覽器的相容性 一 hankcss

2021-09-02 10:47:25 字數 1531 閱讀 5566

css hacks 瀏覽器的相容性

目的是讓你的css

**相容不同的瀏覽器

由於不同的瀏覽器對css

的支援及解析結果不一樣,還由於

css中的優先順序的關係。我們就可以根據這個來針對不同的

瀏覽器來寫不同的css。

c

ss hack 3中表現形式

css類內部

hack 

:主要是這種,比如

ie6能識別(_、

*),ie7能識別(

*)、火狐都不能識別

選擇器hack

:比如ie6

能識別 

*html.class{}

,ie7

能識別*+html.class{}

,或者*:first-child+html.class{}

html頭部引用

hack 

:針對所有ie:

(1)方式一條件注釋法  //ie11

已經不支援這個了

ie11 已經不支援條件注釋

(2)方式二 

「-″減號是

ie6專有的

hack

「\9″ 

ie6/ie7/ie8/ie9/ie10

都生效「\0

″ ie8/ie9/ie10

都生效,是

ie8/9/10

的hack

「\9\0

″ 只對

ie9/ie10

生效,是

ie9/10

的hack

確定出一種瀏覽器

background-color:blue; 各個瀏覽器都認識,這裡給firefox用;

background-color:red\9;\9所有的ie瀏覽器可識別;

background-color:yellow\0; \0 是留給ie8的,最新版opera也認識,後面自有hack寫了給opera認的,所以,\0我們就認為是給ie8留的;

+background-color:pink; + ie7定了;

_background-color:orange; _專門留給神奇的ie6;

:root #test  :root是給ie9的,網上流傳了個版本是 :root #test ,這個,新版opera也認識,所以經筆者反覆驗證最終ie9特有的為:root 選擇符 

@media all and (min-width:0px) } 這個是老是跟ie搶著認\0的神奇的opera,必須加個\0,不然firefox,chrome,safari也都認識。。。

@media screen and (-webkit-min-device-pixel-ratio:0) }最後這個是瀏覽器新貴chrome和safari的

(3)方式三

選擇器級別的hack

* html .test /* for ie6 and earlier */

* + html .test /* for ie7 */

瀏覽器相容性

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

瀏覽器相容性

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

瀏覽器相容性

trident ie核心 gecko firefox 核心 webkit chrome,safari blink webkit 的分支 presto 是挪威產瀏覽器 opera 的 前任 核心,為何說是 前任 因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。移動端的瀏覽器核心主要說...