探討瀏覽器的相容性問題，談談常見的css bug有哪些（總結）

本章我們一起來探討瀏覽器的兼容性問題，談談常見的css bug有哪些，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一、常見的主流瀏覽器

1.主流瀏覽器
   Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲遊

2. 最早的瀏覽器 :
Mosaic / Netscape Navigator(網景領航者)（1994-2008）簡稱NN

二、五大瀏覽器核心

   Trident （MSHTML ）（三叉戟；三叉線；三齒魚叉）
   Gecko （壁虎）
   Presto （快速的）
   Webkit （Safari核心,Chrome核心原型,它是蘋果公司自己的內核，也是蘋果蘋果公司的Safari瀏覽器使用的核心）
   Blink (Google和Opera Software開發的瀏覽器排版引擎)。

三、五大瀏覽器核心代表作品

*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開發的瀏覽器排版引擎，2013年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支援的不完善，如對某些規則或語法還沒有形成支持，來隱藏或顯示樣式。

六、常見的CSS bug

#1. 圖片有邊框BUG

   當圖片加在IE上會出現邊框 Hack:給圖片加border:0;或border:0 none;

2. 圖片間隙

div中的圖片間隙BUG 
   描述：在div中插入圖片時，圖片會將div下方撐約三像素。
   hack1:將會與寫在一行上；

   hack2:將轉換為塊狀元素，給予新增宣告：display:block; 

dt,li中圖片間隙

   hack: 將轉換為塊狀元素，給予新增宣告：display:block;

#3. 雙倍浮向（雙倍邊距）（只有IE6出現）
   描述：當Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地將浮向邊邊界（margin）加倍顯示。 

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

4. 預設高度（IE6、IE7）
   描述：在IE6及以下版本中，部分區塊元素擁有預設高度（在16px左右；）
   hack1:為元素新增聲明：font-size:0;

   hack2：為元素新增聲明：overflow:hidden;###

5. 表單元素行高對齊不一致
   說明：表單元素行高對齊方式不一致
   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加在父級元素上
 Css hack:
   1、為父級元素新增overflow:hidden;(建議使用) 
   2、給父元素或子元素加浮動

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

以上是探討瀏覽器的相容性問題，談談常見的css bug有哪些（總結）的詳細內容。更多資訊請關注PHP中文網其他相關文章！