關於處理瀏覽器的相容問題

2022-08-09 14:57:22 字數 2123 閱讀 2933

1. 清除浮動

在ie7 ie6的低版本中通過正常的方式不能解決float的問題

需在後面加 *zoom:1;來清除

2. 透明度

在ie8 及以下版本通過opacity 不能解決透明度的問題

需在後面加 filter:alpha(opacity=50); 來解決 (取值範圍0-100)

3. 處理ie文字框的滑鼠放上面會有藍色外線的情況 

outline:none;

4. 瀏覽器和瀏覽器是有差距的,這個差距是由瀏覽器自身的核心決定的

每個瀏覽器都有自己的字首,主要是解決css3中的相容問題(國內瀏覽器的核心都是谷歌)

chrome(谷歌)的字首 -webkit-

firefox(火狐)的字首 -moz-

ie的字首   -ms-

opera (歐朋) -o- 

5.   還有屬性的字首  hack  (處理ie低版本的相容問題)

hack的兩種寫法    (在html中 和在css中)

在html中

(結束字元)

ie7 的寫法  只有ie8才會出現  csshack( 值 hack    和      選擇器  hack  兩種)

值hack  特殊符號寫在屬性前

選擇器hack   特殊符號寫在選擇器前面

值hack

ie6的hack為短槓或下劃線  「-」  「_」 列如  _background:green;      意思是ie6背景顏色為綠色

ie6、ie7同時相容的hack 為「!」或者「+」

寫法為 !background:green;   意思是ie6、ie7background為綠色

ie8 兼有的hack的屬性值後,分號前加 「\0/」  (斜槓  零  斜槓)

ie6、7、8、9、10兼有hack  屬性之後,分號前加 「 \9 」  (斜槓9)

csshack中的 hack選擇器

ie6專有  *div

ie6、ie7同時專有 div,

除了ie6,其他版本的相容

html>body div

ie6 不支援交集選擇器

相容:獲取瀏覽器視窗可見區域的寬度;

ie6及以下不支援document.documentelement

所以相容性的寫法:

var w=document.documentelement.clientwidth||document.body.clientwidth 

總結js解決相容性的方法:

1.   ||

var dd=document.documentelement.clientwidth||document.body.clientwidth

2.  if() 條件語句;

if(window.getcomputedstyle  ==(另一種寫法:window.getcomputed.style in window))catch(error){}

前提條件:必須在報錯的條件下和if條件語句比較效能上比較差,不在萬不得已的情況下,不能使用

案例:var css;

try   //ie低版本下當我們點選元素的時候,瀏覽器會把元素身上事件,全部轉移給div,阻礙了文字和被選中的行為

else   //標準瀏覽器直接把瀏覽器自動選中和文字的預設行為取消了

但是ie低版本的setcapture()這個方法有很霸道的一面:會把所有跟他相同的事件都捕獲到,執行自己的事件

所以要在滑鼠抬起的時候,執行另乙個方法;取消全域性捕獲releasecapture;

if(div.releasecapture)

else if(elem.attachevent) )          //這是我的理解   (還有一種說法是,他的外部環境this指向window,我把他的外部環境的this指向變成當前例項,再去操作)

}else

}addevent(a,"click",fn)

function fn()

移除事件

function removeevent(elem, type, handle)

else if(elem.detachevent) )

}else

}removeevent(a,"click",fn)

function fn()

瀏覽器相容問題處理總結

解決方法var str 1.json.parse 將json格式的字串轉成json格式的物件 var o json.parse str o.a 200 console.log o.a console.log json 在ie8以下,json是不存在的 console.log eval str 複製 ...

瀏覽器相容問題

我經常看到一些人提問說網頁錯位,和在火狐裡面看上去網頁是好的,在ie在錯位了.在web 下html css裡全看一些關於這些問題.還有有ul li什麼調整不好的.等等 全可以用css hack 解決的.解決方法 用positon relative 然後 top 0px left 0px 上面的top...

瀏覽器相容問題

給近兩天的工作乙個總結,給這週劃上句號。工作中遇到了在google顯示的很好的介面,在ie顯示的不是很好,但還能看,僅僅是顏色和和位置錯位,在360瀏覽器下看就是真的錯誤太大了,不顯示,樣式也亂了,於是走上解決瀏覽器相容之路。思路1 對應每個瀏覽器寫個css,判斷之,工作量太大,放棄。思路2 針對每...