浏览器兼容

2017-06-05  本文已影响0人  billa_8f6b

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. 根据浏览器选择相应的样式

  1. 使用html5shiv.js可以使IE6,7兼容html5标签

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


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


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

猜你喜欢

热点阅读