瀏覽器兼容性問題總結

瀏覽器兼容性問題總結

如下兼容性問題總結只支持到IE8及以上，更低版本不通過測試

1. 元素透明度的問題

在chrome ,ff等瀏覽器中，只須要設置opacity便可達到的效果，在IE中須要對多個要素進行設置才行

 

{

filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;

}

2. js引入的問題 text/javascript和application/javascript  在頁面引入js代碼的時候，須要寫出type的類型。

　 雖然application/javascript是標準的type類型，可是你們都喜歡寫成text/javascript 因此瀏覽器對它的支持更好(特別是IE) ，

    因此若是你使用類型是application/javascript ，在低版本的IE中，代碼有可能會不執行，這點須要注意。

3. css3 中的border-radius 屬性，在IE8中支持的並非很好，人多人都介紹瞭如何處理這種兼容問題，可是用過以後會發現仍是

　會有不少其餘問題的出現，因此建議：若是須要兼容IE8如下的版本，仍是用切好的圓角圖片更爲合適。

4. firefox瀏覽器的鼠標滾動事件，因爲firefox並不支持onmousewheel事件，因此須要進行瀏覽器判斷爲其綁定DOMMouseScroll事件

　　if(document.addEventListener){ 
　　　　document.addEventListener('DOMMouseScroll',scrollFunc,false); 
　　}

　用jquery綁定mousewheel事件的時候，能夠綁定mousewheel事件，在執行的時候打印出ev的值，在向上或向下滾動的時候發現只有deltaY的值會變化，或1或-1，由此可判斷滾輪滾動的方向。

　$(document).on('mousewheel', function(ev) {});

5. 微信中使用<input type="file"> 的問題。

有時候咱們會在微信公衆號裏開發會遇到上傳圖片的功能，當你寫<input type="file"> 的時候，在IOS上能夠成功調起拍照和圖庫兩塊，在安卓手機上只能調取圖庫而沒有拍照功能，解決辦法：給input 加上accept屬性

<input type="file" accept="image/*" />  //調用相機 ，圖片或者相冊 （二者都行）

加上了capture=camera"屬性以後安卓手機就直接調用了相機，沒有了圖庫的選項

<input type="file" accept="image/*;capture=camera"> //直接調用相機

<input type="file" accept="video/*;capture=camcorder"> // 調取視頻
<input type="file" accept="audio/*;capture=microphone"> //調取音頻

注：capture表示，能夠捕獲到系統默認的設備，好比：camera--照相機；camcorder--攝像機；microphone--錄音。————————————————版權聲明：本文爲CSDN博主「yx_cos」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/yx_cos/article/details/82629719