CSS快速學習9 瀏覽器相容

2021-07-22 03:57:17 字數 4222 閱讀 2993

五大瀏覽器核心

•trident   

(mshtml

)     (三叉戟;三叉線;三齒魚叉)

•gecko      

(壁虎)

•presto      

( 迅速的)

•webkit    

(safari

核心,chrome

核心原型

,它是蘋果公司自己的核心,也是蘋果的

safari

瀏覽器使用的核心)

•blink         (

由google

和opera software

開發的瀏覽器排版引擎)。

1)五大瀏覽器核心代表作品

*trident:   ie、

maxthon(遨遊)

theworld

世界之窗、

360瀏覽器

代表作品ie,因為

ie**在

windows

中,所以占有極高的市場份額,又稱

ie核心或是

mshtml

,此核心只能應用於

windows

平台,且是不開源的。

*gecko:代表作品

mozilla firefox

是開源的

,它的最大優勢是跨平台,能在

microsoft windows

、linux

和macos x

等主要作業系統上執行。

*webkit : 代表作品

safari

、chrome

, 是乙個開源專案。

*presto :   代表作品

opera

,presto

是由opera software

開發的瀏覽器排版引擎。它也是世界上公認的渲染速度最快的引擎。

*blink :由

google

和opera software

開發的瀏覽器排版引擎,

2023年4

月發布。

1.為什麼會出現瀏覽器相容問題?

由於各大主流瀏覽器由不同的廠家開發,所用的核心架構和**也很難重和,這就為各種莫名其妙的bug(**錯誤)提供了溫床。再加上各大廠商出於自身利益考慮而設定的種種技術壁壘,都讓

css應用起來比想象得要麻煩。瀏覽器的相容問題是我們必須去克服的。

2.  css bug、

css hack

和filter

1)  css bug: css樣式在各瀏覽器中解析不一致的情況,或者說

css樣式在瀏覽器中不能正確顯示的問題稱為

css bug.

2)  css hack:  css中,

hack

是指一種相容

css在不同瀏覽器中正確顯示的技巧方法,因為它們都屬於個人對

css**的非官方的修改,或非官方的補丁。有些人更喜歡使用

patch(補丁)

來描述這種行為。

3)  filter:表示過濾器的意思,它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或宣告的方法。本質上講,

filter

是一種用來過濾不同瀏覽器的

hack

型別。

*設計

css hack

和 filter

通常有兩種方法:

1)一種是利用瀏覽器自身的

bug,來隱藏或顯示樣式或宣告;

2)另一種是利用瀏覽器對css支援的不完善,如對某些規則或語法還沒有形成支援,來隱藏或顯示樣式。

(一)、ie6常見

css解析

bug及

hack

1)間隙

a) div中的間隙(該

bug出現在

ie6及更低版本中)

div下方撐大三畫素。

hack1:將

與寫在一行上;

hack2:將

轉為塊狀元素,給

新增宣告:

display:block;

b)dt中間隙(

ie6)

hack:  將

轉為塊狀元素,給

新增宣告:

display:block;

c) li中間隙

hack1:img轉為塊元素;

hack2:給

ul設定

font-size:0;

hack3:給

img設定

margin-bottom:-3px;

2)  雙倍浮向(雙倍邊距)

描述:當ie6及更低版本瀏覽器在解析浮動元素時,會錯誤地把浮向邊界加倍顯示。

hack:給浮動元素新增宣告:

display:inline;

3)預設高度(

ie6)

描述:在ie6及以下版本中,部分塊元素擁有預設高度(低於

18px

高度)

hack1:給元素新增宣告:

font-size:0;

hack2:給元素新增宣告:

overflow:hidden;

4)表單元素行高不一致

(ie,moz,c,o,s)

描述:表單元素行高對齊方式不一致

hack:給表單元素新增宣告:

float:left;

5)按鈕元素預設大小不一

描述:各瀏覽器中按鈕元素大小不一致

hack1: 統一大小/(用

a標記模擬)

hack2:在

input

上寫按鈕的樣式,一定要把

input

的邊框去掉。

6)百分比

bug

描述:在ie6及以下版本中在解析百分比時,會按四捨五入方式計算從而導致

50%加

50%大於

100%

的情況。

hack:  給右面的浮動元素新增宣告:

clear:right;   

意思:清除右浮動。

7)滑鼠指標

bug

描述:cursor屬性的

hand

屬性值只有

ie瀏覽器識別,其它瀏覽器不識別該宣告,

cursor

屬性的pointer

屬性值ie6.0

以上版本及其它核心瀏覽器都識別該宣告。

hack:如統一某元素滑鼠指標形狀為手型,

應新增宣告:cursor:pointer;

8)透明屬性

ie瀏覽器寫法:

filter:alpha(opacity=value);

取值範圍

1-100

相容其他瀏覽器寫法:opacity:value;(value的取值範圍

0-1,0.1,0.2,0.3-----0.9)

9)li裡a

加display

:block

;出現行高不一致;

hack1:給a加

display

:inline-block;

hack2:給a加

display

:inline;

(二)過濾器(filter)

1)下劃線屬性過濾器

當在乙個屬性前面增加了乙個下劃線後,由於符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個宣告,但是在ie6及更低版本瀏覽器中會繼續解析這個規則。

語法:選擇符

2)

!important

關鍵字過濾器

它表示所附加的宣告具有最高優先順序的意思。但由於ie6及更低版本不能識別它,我們可以利用

ie6的這個

bug作為過濾器來相容ie6和其它標準瀏覽器。

語法:選擇符

3)

*屬性過濾器

當在乙個屬性前面增加了*後,該屬性只能被

ie7瀏覽器識別,其它瀏覽器混略該屬性的作用。

語法:選擇符

瀏覽器CSS相容

一 important 在ie6及ff中的使用 box1 box1 important是說這個設定有優先順序,ie碰到 important不會出錯只是忽略他的功能,假如後面又設定了width,ie會以最後設定的 width為準,假如後面再沒有其它設定,則會用當前這個值,也就是前面的 importan...

手機瀏覽器css相容

pixel與point比值稱為device pixel ratio,普通裝置都是1,iphone 4是2,有些android機型是1.5。那麼 webkit min device pixel ratio 2可以用來區分iphone 4 4s 5 和其它的手機 iphone4 4s的解析度為640 9...

CSS相容不同瀏覽器

製作頁面的時候,由於瀏覽器的不同,對css的解析也會有所不同,從而達不到我們預期想要的頁面效果,這個時候我們就需要針對不同的瀏覽器去寫不同的css,讓它能夠同時相容不同的瀏覽器。css hank。原始 歡迎光臨!減號是ie6專有的hack 9 ie6 ie7 ie8 ie9 ie10都生效 0 ie...