· 主要測試的瀏覽器有：
o IE,Mozilla,Opera ,Safari ,谷歌
· 瀏覽器的內核
o Trident內核：IE搜狗瀏覽器等
o Gecko內核：Mozilla等
o Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]
o Webkit內核：Safari,谷歌(舊版)等。
o Blink : 谷歌(28及以后版本) opera
· 兼容新及解決方法
o 1)圖片有邊框BUG
§ Hack:給圖片加border:0;或者border:0 none;
o 2)圖片間隙
§ div中的圖片間隙BUG
§ 描述：在div中插入圖片時，圖片會將div下方撐大大約三像素。
§ hack1:將與寫在一行上;
§ hack2:將轉為塊狀元素，給
添加聲明：display:block;
o 3) 雙倍浮向(雙倍邊距)(只有IE6出現)
§ 描述：當Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界(margin)加倍顯示。
§ hack:給浮動元素添加聲明：display:inline;
o 4)默認高度(IE6、IE7)
§ 描述：在IE6及以下版本中，部分塊元素擁有默認高度(在16px左右;)
§ hack1:給元素添加聲明：font-size:0;
§ hack2：給元素添加聲明：overflow:hidden;
o 5)表單元素對齊不一致
§ 描述：表單元素行高對齊方式不一致
§ hack:給表單元素添加聲明：float:left;
o 6)按鈕元素默認大小不一
§ 描述：各瀏覽器中按鈕元素大小不一致
§ hack1： 統一大小/(用a標記模擬)
§ hack2:input外邊套一個標簽，在這個標簽里寫按鈕的樣式，把input的邊框去掉。
§ hack3:如果這個按鈕是一個圖片，直接把圖片作為按鈕的背景圖即可。
o 7)鼠標指針bug
§ 描述：cursor屬性的hand屬性值只有IE9以下瀏覽器識別，其它瀏覽器不識別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內核瀏覽器都識別該聲明。
§ hack: 如統一某元素鼠標指針形狀為手型，應添加聲明：cursor:pointer
o 8)透明屬性
§ 兼容其他瀏覽器寫法：opacity:value;(value的取值范圍0-1; 例：opacity:0.5;)
§ IE瀏覽器寫法：filter:alpha(opacity=value);取值范圍 1-100(整數)
更多關于IT前端培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。
京公網安備 11010802030320號