瀏覽器相容

2021-09-10 18:05:35 字數 2664 閱讀 2789

• trident (mshtml) (三叉戟;三叉線;三齒魚叉)

• gecko (壁虎)

• presto ( 迅速的)

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

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

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

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

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

*使用hack帶來的一些***:降低了css**的可讀性,增加了**的負擔。

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

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

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

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

1、有邊框bug

2、間隙

原因:給容器沒加高度

div中的間隙bug

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

hack1:將div與img寫在一行上;

hack2:將img轉為塊狀元素,給img新增宣告:display:block;

hack3:給img加float;

hack4:給img加verticle-align:top.

dt,li中間隙

hack5:將img轉為塊狀元素,給img新增宣告:display:block;

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

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

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

4、預設高度(ie6、ie7)

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

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

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

5、表單元素行高對齊不一致

原因:本身input和按鈕高度就不同

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

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

6、按鈕元素預設大小不一

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

hack1:統一大小/(用a標記模擬)

hack2:input外邊套乙個標籤,在這個標籤裡寫按鈕的樣式,把input的邊框去掉。

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

7、百分比bug

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

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

clear:right;意思:清除右浮動。

clear:left:清除左浮動

clear:both:清除兩邊的浮動

8、滑鼠指標bug

描述:cursor屬性的hand屬性值只有ie9以下瀏覽器識別,其它瀏覽器不識別該宣告,cursor屬性的pointer屬性值ie6.0以上版本及其它核心瀏覽器都識別該宣告。

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

9、透明屬性

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

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

10、li列表的bug

1)當父元素(li) 有float:left;子元素(a) 沒設定浮動的情況下會出現垂直bug;

hack:給父元素li和子元素a都設定浮動;

2)當給li中的a轉成block;並且有height,並有float的,li中沒設定浮動會出現階梯顯示。

hack:同時給li加float;

11、margin上下重疊

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

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

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

12、margin bug

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

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

hack2:給其中乙個子元素新增display:inline-block;

瀏覽器相容

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

瀏覽器相容

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

瀏覽器相容

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