• -------------------------------关于浏览器兼容性问题-------------------------------------------


    关于浏览器兼容性问题

    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*/ 

  • 相关阅读:
    Expression Bland 入门视频(五) 了解对象面板和属性面板
    Windows Phone 一步一步从入门到精通
    “北京今年入冬的第一场雪”,纪念博客园写日志一年了
    2010年即将到来,用我的名字注册了的新域名 TerryFeng.com
    我要在黑龙江的老家,组织一个微软.Net俱乐部
    Windows 7 小工具 问题步骤记录器
    给弟弟起步学习软件开发(.Net 方向)的指导,博友们帮助看看,提些意见给他。
    今天是中国传统节日“重阳节”。也是爷爷的生日,今年80岁高龄。
    Windows 7 远程服务器管理工具 简体中文 下载
    新的技术和概念应该尽可能先去接受,而不是排斥。
  • 原文地址:https://www.cnblogs.com/nan-3/p/6381975.html
Copyright © 2020-2023  润新知