浏览器兼容性问题总结

浏览器兼容性问题总结

以下兼容性问题总结只支持到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

原文地址:https://www.cnblogs.com/warm-stranger/p/4664398.html