zoukankan      html  css  js  c++  java
  • -------------------------------关于浏览器兼容性问题-------------------------------------------

    关于浏览器兼容性问题

    1.主要的浏览器内核

    webkit浏览器(chrome360等),firefox浏览器,opera浏览器,IE浏览器(IE9前后的区别,很关键

    (后面的浏览器可以不记住内核名称)

    2.浏览器版本检测

    var userAgent = navigator.userAgent.toLowerCase(); 
    // Figure out what browser is being used 
    jQuery.browser = { 
    version: (userAgent.match( /.+(?:rv|it|ra|ie)[/: ]([d.]+)/ ) || [])[1], 
    safari: /webkit/.test( userAgent ), 
    opera: /opera/.test( userAgent ), 
    msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ), 
    mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ) 
    }; 

    http://www.jb51.net/article/31729.htm

    3.IE的兼容模式

    IE浏览器从IE8开始添加了兼容模式,开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题,于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式:

    <metahttp-equiv="X-UA-Compatible"content="IE=8"><!--IE8模式渲染--> <metahttp-equiv="X-UA-Compatible"content="IE=7"><!--IE7模式渲染-->

    http://www.jb51.net/css/88637.html

    4.IE的怪异模式

    ie6ie7ie8下,如果不声明DOCTYPE,在会触发怪异模式(quirks 模式)。

    怪异模式是老版本,怪异模式通常模拟老式浏览器(比如Microsoft IE4 和Netscape Navigator4)的解析模式。

    http://www.jb51.net/css/384176.html

    5.IE8(及之前)浏览器事件绑定方式的不同

    添加事件

    //w3c标准

    addEventListener(type, listener, useCapture);

    //低版本的ie浏览器

    attachEvent(type, listener);

    删除事件

    //w3c标准

    removeEventListener(event,function,capture/bubble);

    //低版本的ie浏览器

    detachEvent(event,function);

    解决方案:使用jqueryjQuery 2.0以前的版本)

    6.ie7(及之前)的浏览器不支持png半透明效果

    解决方案:使用滤镜实现或者做降级处理

    7.IE8(及之前)的浏览器不支持H5CSS3IE9H5css3支持不全。

    解决方案:降级处理

    8.CSS3属性前缀问题

    大部分主流浏览器支持W3C标准写法,部分浏览器(个别android手机浏览器)不支持W3C标准写法,需要加前缀,前缀包括-webkit -o -ms -moz

    9.关于降级处理

    在不支持h5css3的浏览器上通过其他替代方案,或者不进行实现,给用户以友好的提示,但是要尽量保证页面的美观和功能的完整性。

    10.ajax的实现

    w3c使用XMLHttpRequest , IE8(及之前)浏览器中使用ActiveXObject

     

    11. ie各个版本hack

    /*类内部hack*/

        .header {_100px;}            /* IE6专用*/

        .header {*+100px;}        /* IE7专用*/

        .header {*100px;}            /* IE6IE7共用*/

        .header {100px;}        /* IE8IE9共用*/

        .header {100px9;}        /* IE6IE7IE8IE9共用*/

        .header {330px9;}    /* IE9专用*/

    /*选择器Hack*/

        *html .header{}        /*IE6*/ 

        *+html .header{}    /*IE7*/ 

  • 相关阅读:
    activiti并行和串行区别
    SpringMVC 封装返回结果对象
    maven基础
    activiti表
    SpringBoot进阶
    SpringBoot基础
    javascript ES6模块化
    Vuejs搜索下拉框
    Vuejs2.0 + bootstrap demo
    maven settings.xml
  • 原文地址:https://www.cnblogs.com/nan-3/p/6381975.html
Copyright © 2011-2022 走看看