· 主要測(cè)試的瀏覽器有：

　　o IE,Mozilla,Opera ,Safari ,谷歌

　　· 瀏覽器的內(nèi)核

　　o Trident內(nèi)核：IE搜狗瀏覽器等

　　o Gecko內(nèi)核：Mozilla等

　　o Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]

　　o Webkit內(nèi)核：Safari,谷歌(舊版)等。

　　o Blink : 谷歌(28及以后版本) opera

　　· 兼容新及解決方法

　　o 1)圖片有邊框BUG

　　§ 當(dāng)圖片加在IE上會(huì)出現(xiàn)邊框

　　§ Hack:給圖片加border:0;或者border:0 none;

　　o 2)圖片間隙

　　§ div中的圖片間隙BUG

　　§ 描述：在div中插入圖片時(shí)，圖片會(huì)將div下方撐大大約三像素。

　　§ hack1:將與寫(xiě)在一行上;

　　§ hack2:將轉(zhuǎn)為塊狀元素，給添加聲明：display:block;

　　o 3) 雙倍浮向(雙倍邊距)(只有IE6出現(xiàn))

　　§ 描述：當(dāng)Ie6及更低版本瀏覽器在解析浮動(dòng)元素時(shí)，會(huì)錯(cuò)誤地把浮向邊邊界(margin)加倍顯示。

　　§ hack:給浮動(dòng)元素添加聲明：display:inline;

　　o 4)默認(rèn)高度(IE6、IE7)

　　§ 描述：在IE6及以下版本中，部分塊元素?fù)碛心J(rèn)高度(在16px左右;)

　　§ hack1:給元素添加聲明：font-size:0;

　　§ hack2：給元素添加聲明：overflow:hidden;

　　o 5)表單元素對(duì)齊不一致

　　§ 描述：表單元素行高對(duì)齊方式不一致

　　§ hack:給表單元素添加聲明：float:left;

　　o 6)按鈕元素默認(rèn)大小不一

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

　　§ hack1： 統(tǒng)一大小/(用a標(biāo)記模擬)

　　§ hack2:input外邊套一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽里寫(xiě)按鈕的樣式，把input的邊框去掉。

　　§ hack3:如果這個(gè)按鈕是一個(gè)圖片，直接把圖片作為按鈕的背景圖即可。

　　o 7)鼠標(biāo)指針bug

　　§ 描述：cursor屬性的hand屬性值只有IE9以下瀏覽器識(shí)別，其它瀏覽器不識(shí)別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內(nèi)核瀏覽器都識(shí)別該聲明。

　　§ hack: 如統(tǒng)一某元素鼠標(biāo)指針形狀為手型，應(yīng)添加聲明：cursor:pointer

　　o 8)透明屬性

　　§ 兼容其他瀏覽器寫(xiě)法：opacity:value;(value的取值范圍0-1; 例：opacity:0.5;)

　　§ IE瀏覽器寫(xiě)法：filter:alpha(opacity=value);取值范圍 1-100(整數(shù))

　　更多關(guān)于IT前端培訓(xùn)的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。