瀏覽器相容

2022-08-22 20:42:11 字數 2550 閱讀 8229

瀏覽器五大核心

1、trident(ie核心)

代表作品:ie(此核心只適用於windows)

2、gecko(火狐核心)

代表作品:firefox(開源且跨平台)

3、webkit

代表作品:chrome(谷歌-前期)、safari(蘋果)開源

4、presto

代表作品:opera(歐朋-前期)

渲染速度最快引擎(已廢棄)

5、blink

代表作品:谷歌(後期)、歐朋(後期)

css bug

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

解決方法

1、css hack

css中,hack是指一種相容css在不同瀏覽器中正確顯示的技巧方法(降低了css**的可讀性,增加了**的負擔。

)2、filter

表示過濾器的意思,本質上講,filter是一種用來過濾不同瀏覽器的hack型別。

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

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

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

常見bug及hack

1)有邊框bug(ie8及以下)

描述:當加在ie上會出現邊框

hack: 給加 border: 0 none;

2)間隙(ie6)

div中的間隙bug

描述:在div中插入時,會將div下方撐大大約三畫素

hack1:將div的字型大小設成0;

hack2:將

轉為塊狀元素,給

新增宣告:display:block;

3) 雙倍浮向(雙倍邊距)(只有ie6出現)

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

hack:給浮動元素新增宣告 display:inline;

4)預設高度(ie6、ie7)

描述:在ie6及以下版本中,部分塊元素擁有預設高度(在16px左右;)

hack1:給元素新增宣告:font-size:0;

hack2:給元素新增宣告:overflow:hidden;

5)表單元素行高對齊不一致(各瀏覽器都有)

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

hack1:給表單元素新增宣告:float:left;

hack2:給表單元素新增宣告:vertical-align:middle;

6)按鈕元素預設大小不一(各瀏覽器都有)

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

hack1:input外邊套乙個標籤,在這個標籤裡寫input的樣式,把input的邊框去掉,預設padding也要去掉,display:block。

hack2:用a標籤模擬

7)百分比bug(ie6)

描述:在ie6及以下版本中在解析百分比時,會按四捨五入方式計算從而導致50%加50%大於100%的情況。(也會受系統影響)

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

clear:right; 清除右浮動

8)滑鼠指標bug(手型就寫pointer)

描述: cursor屬性的hand屬性值只有ie9以下瀏覽器識別,其它瀏覽器不識別該宣告

cursor屬性的pointer屬性值ie6.0以上版本及其它核心瀏覽器都識別該宣告

hack: 如統一某元素滑鼠指標形狀為手型,應新增宣告:cursor:pointer;

滑鼠指標語法

cursor:auto 預設

crosshair 加號

text 文字

wait 等待

help 幫助

progress 過程

inherit 繼承

move 移動

ne-resize 向上或向右移動

pointer 手形

9)透明屬性

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

例:opacity:0.5;

ie瀏覽器寫法 filter:alpha(opacity=value); 取值範圍 0-100(整數)

例:filter:alpha(opacity=50);

10)margin塌陷

當前元素(父元素裡面第乙個子元素)與父元素沒有設定任何浮動的情況下,設定margin-top後,會錯誤的把margin-top加在父級元素上

hack1、給父級元素新增overflow:hidden;(推薦使用)

hack2、給父元素或者子元素加浮動

11)margin合併bug

當兩個上下排列的元素,上元素有margin-bottom:30px;下面元素有margin-top:20px;他們中間的距離不會疊加,而是會設定為較大的值

hack 給上邊盒子外層加乙個空盒子,加overflow:hidden;

瀏覽器相容

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...

瀏覽器相容

1 css bug css樣式在各瀏覽器中解析不一致的情況,或者說 css樣式在瀏覽器中不能正確顯示的問題稱為 css bug.2 css hack css中,hack 是指一種相容 css在不同瀏覽器中正確顯示的技巧方法,因為它們都屬於個人對 css 的非官方的修改,或非官方的。有些人更喜歡使用 ...

瀏覽器相容

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