瀏覽器相容

一、常用的瀏覽器

二、五大瀏覽器核心

•trident （mshtml）（三叉戟；三叉線；三齒魚叉）

•gecko （壁虎）

•presto （迅速的）

•webkit （safari核心,chrome核心原型,它是蘋果公司自己的核心，也是蘋果的safari瀏覽器使用的核心）

•blink (由google和opera software開發的瀏覽器排版引擎)。

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

*gecko：代表作品mozilla firefox 是開源的,它的最大優勢是跨平台，能在microsoft windows、linux和macos x等主要作業系統上執行。

*webkit : 代表作品safari、chrome ，是乙個開源專案。

*presto : 代表作品opera ，presto是由opera software開發的瀏覽器排版引擎。它也是世界上公認的渲染速度最快的引擎。

*blink ：由google和opera software開發的瀏覽器排版引擎，2023年4月發布。

三.為什麼會出現瀏覽器相容問題？

由於各大主流瀏覽器由不同的廠家開發，所用的核心架構和**也很難重和，這就為各種莫名其妙的bug(**錯誤）提供了溫床。再加上各大廠商出於自身利益考慮而設定的種種技術壁壘，都讓css應用起來比想象得要麻煩。瀏覽器的相容問題是我們必須去克服的 css bug、css hack和filter

1) css bug: css樣式在各瀏覽器中解析不一致的情況，或者說css樣式在瀏覽器中不能正確顯示的問題稱為css bug.

2) css hack: css中，hack是指一種相容css在不同瀏覽器中正確顯示的技巧方法，因為它們都屬於個人對css**的非官方的修改，或非官方的補丁。有些人更喜歡使用patch(補丁)來描述這種行為。

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

*使用hack帶來的一些***

降低了css**的可讀性，增加了**的負擔。

*設計css hack和 filter通常有兩種方法：

1)一種是利用瀏覽器自身的bug，來隱藏或顯示樣式或宣告；

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

（一）、ie6常見css解析bug及hack

1)間隙

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的邊框去掉。

hack3：如果這個按鈕是乙個，直接把作為按鈕的背景圖即可。

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;

(二). ff及其他瀏覽器相容問題

1)透明屬性相容

opacity:.value;

(三).過濾器(filter)

1）下劃線屬性過濾器

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

語法：選擇符

2）!important關鍵字過濾器

它表示所附加的宣告具有最高優先順序的意思。但由於ie6及更低版本不能識別它，我們可以利用ie6的這個bug作為過濾器來相容ｉｅ６和其它標準瀏覽器。

語法：選擇符

3）*屬性過濾器

當在乙個屬性前面增加了*後，該屬性只能被ie7瀏覽器識別，其它瀏覽器混略該屬性的作用。

語法：選擇符

cursor:;

auto預設

crosshair加號

text文字

wait等待

help幫助

progress過程

inherit繼承

move移動

ne-resize向上或向右移動

pointer手形

瀏覽器相容

瀏覽器相容

瀏覽器相容

瀏覽器相容

相關推薦