1. 程式人生 > >瀏覽器及其相容

瀏覽器及其相容

瀏覽器

主流瀏覽器

  • Internet Explorer(IE)
  • Safari(蘋果)
  • Mozilla Firefox(火狐)
  • Google Chrome(谷歌)
  • Opera(歐朋)

最早的瀏覽器

Mosaic / Netscape Navigator(網景領航者)(1994-2008)簡稱NN

五大瀏覽器核心

  • Trident (MSHTML) (ie 三叉戟;三叉線;三齒魚叉)
  • Gecko (壁虎)
  • Presto ( 迅速,世界公認渲染速度最快)
  • Webkit (Safari核心,Chrome核心原型,它是蘋果公司自己的核心,也是蘋果的Safari瀏覽器使用的核心)
  • Blink (由Google和Opera Software開發的瀏覽器排版引擎,2013年4月釋出)。

核心代表作

  • Trident::IE
  • Gecko:Firefox
  • Webkit:Safari、Chrome
  • Presto:Opera
  • Blink:Chrome(28及往後版本)、Opera(15及往後版本)和Yandex瀏覽器中使用

瀏覽器相容常見BUG

BUG 描述 Hack
圖片有邊框(ie8及以下) 當圖片加在IE上會出現邊框 img{border:0 none;}
圖片間隙 在div中插入圖片時,圖片會將div下方撐大大約三畫素 img{display:block;}
雙倍浮向(雙倍邊距)(僅IE6) 解析浮動元素時,會錯誤地把浮向邊邊界(margin)加倍顯示 給浮動元素新增宣告:{display:inline-block;}
預設高度(IE6、IE7) 部分塊元素擁有預設高度(在16px左右;) hack1:給元素新增宣告:{font-size:0};hack2:給元素新增宣告: {overflow:hidden;}
表單元素行高對齊不一致 同左 hack1:給表單元素新增宣告:{float};hack2:給表單元素新增宣告:{vertical-align:middle;}
按鈕元素預設大小不一 各瀏覽器中按鈕元素大小不一致 外層巢狀一個元素,將表單元素的樣式賦給這個外層元素
百分比bug IE6及以下版本中在解析百分比時,會按四捨五入方式計算從而導致50%加50%大於100%的情況。(也會受系統影響) 平時做頁面不要做太滿。如果都左浮動,最後一個清除右浮動 clear:left display:inline-block;===>float
滑鼠指標bug cursor屬性的hand屬性值只有IE9以下瀏覽器識別,cursor屬性的pointer屬性值IE6.0以上版本及其它核心瀏覽器都識別該宣告。 cursor:hand; (ie)、cursor:pointer;
透明屬性 該屬性宣告識別不同 opacity:0-1;filter:alpha(opacity=0-100) (ie)
margin塌陷 當前元素(父元素裡面第一個子元素)與父元素沒有設定任何浮動的情況下,設定margin-top後,會錯誤的把margin-top加在父級元素上 hack:1給父級元素新增overflow:hidden;(推薦使用);hack:2給父元素或者子元素加浮動
margin合併bug 當兩個上下排列的元素,上元素有margin-bottom:30px;下面元素有margin-top:20px;他們中間的距離不會疊加,而是會設定為較大的值 給上元素套個div,只設置overflow: hidden;不能設定寬高

不同瀏覽器字首(相容)

-webkit-border-box:谷歌瀏覽器、國內瀏覽器
-0-border-box: opera瀏覽器
-moz-border-box:火狐瀏覽器
-ms-border-box:ie瀏覽器

滑鼠指標cursor屬性值

auto預設
crosshair加號
text文字
wait等待
help幫助
progress過程
inherit繼承
move移動
ne-resize向上或向右移動
pointer手形