美文网首页
浏览器兼容

浏览器兼容

作者: billa_8f6b | 来源:发表于2017-06-05 18:16 被阅读0次

    1. 什么是 CSS hack

    由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的页面效果。


    2. 谈一谈浏览器兼容的思路

    1. 首先考虑要不要做兼容。从产品的角度考虑产品的受众,及受众使用的各浏览器的比例,效果优先还是基本功能优先。
    2. 兼容哪些浏览器,兼容到什么版本,让哪些浏览器支持哪些效果。
    3. 渐进增强和优雅降级的选择
    4. 如何做兼容,根据兼容需求选择技术框架,比如:
      • Bootstrap (>=ie8)
      • jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
      • Vue (>= ie9)
    5. 根据兼容需求选择兼容工具html5shiv.js、respond.js、css reset、Modernizr、postCSS
    6. 考虑使用条件注释、CSS Hack、js 能力检测等对兼容做一些修补。

    3.列举5种以上浏览器兼容的写法

    1. 条件注释
      条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。


      <script>alert(1);</script>


      使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作,但在 Internet Explorer 10 中无法正常工作。 IE10不再支持条件注释

    2. CSS hack
      可以实现只有IE才能识别的样式或html代码
      .box{
      color: red;
      _color: blue; /ie6/
      color: pink; /ie67/
      color: yellow\9; /
      ie/edge 6-8*/
      }

       <!–-[if IE 7]>
       <link rel="stylesheet" href="ie7.css" type="text/css" />
       <![endif]–->
      
    3. 根据浏览器选择相应的样式

    • inline-block: >=ie8
    • min-width/min-height: >=ie8
    • :before,:after: >=ie8
    • div:hover: >=ie7
    • background-size: >=ie9
    • 圆角: >= ie9
    • 阴影: >= ie9
    • 动画/渐变: >= ie10
    1. 使用html5shiv.js可以使IE6,7兼容html5标签

    2. 使用response.js十一使IE6,7支持媒体查询


    4. 以下工具/名词是做什么的

    • 条件注释
      作用:在HTML源码中写出能被IE有条件解释的代码,可以向IE提供或隐藏代码
    • IE Hack
      作用:使用特殊的语句写出只有IE能够解析的代码,常见的IE Hack有属性前置法、选择器前置法和IE条件注释

    • js 能力检测
      作用:使用js语句检测浏览器是否支持某种特定的属性

    • html5shiv.js
      作用:可以解决IE9以下版本浏览器对html5标签不识别的问题

    • respond.js
      作用:可以使IE6~IE8支持媒体查询

    • css reset
      作用:因为早期的浏览器支持和理解的CSS规范不同,导致渲染出来的效果不一样,会出现兼容性问题,css reset通过重新定义标签的样式,覆盖浏览器的默认样式

    • normalize.css
      作用:是一个很小的css文件,但它在默认的html元素样式上提供了跨浏览器的高度一致性,相比于reset.css,它是一种现代的,为html5准备的优质替代方案

    • Modernizr
      作用:用于检测出浏览器是否支持某种html5和css3的新特性,浏览器是否禁用js等

    • postCSS
      是一套使用js插件实现的转换CSS的工具;这些插件支持变量、混合语法等等;参考:PostCSS快速入门使用


    1. 一般在哪个网站查询属性兼容性?
      caniuse :查css属性 选择器在各浏览器的兼容。
      browserhacks:查css属性 选择器在各浏览器Hack的写法

    相关文章

      网友评论

          本文标题:浏览器兼容

          本文链接:https://www.haomeiwen.com/subject/tlqwfxtx.html