css

CSS浏览器兼容

什么是 CSS hack
  • CSS hack指浏览器各版本之间对CSS解析后展现的效果不一样,针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果就叫作CSS Hack。

  • ?
    ?浏览器兼容的思路
    1. 产品的需求(实用于哪些用户、浏览器比例、效果优先还是基本功能优先)
    2. 做到什么程度(让哪些浏览器支持哪些效果)
    3. 根据兼容需求选择兼容工具 `html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS`
    4. 根据兼容需求选择技术框架,比如:`Bootstrap(>=ie8);jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9);Vue (>= ie9)`
    5. 条件注释、CSS Hack、js 能力检测做一些修补

    ?
    浏览器兼容的5种写法? ??
    1. 选择合适的框架
  • Bootstrap (>=ie8),jQuery 1.~ (>=ie6),jQuery 2.~ (>=ie9),Vue (>= ie9)

  • 2. 条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
    <!--[if IE 6]> 
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!-->
    <script>alert(1);</script>
    <!--<![endif]-->
    <!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->
    3.?CSS属性前缀法
    .box {
    color: red;
    _color: blue; /*ie6*/
    *color: pink; /*ie67*/
    color: yellow\9; /*ie/edge 6-8*/
    }
    4.?CSS块级兼容
    .target{
    display: inline-block;
    *display: inline;
    *zoom: 1;
    }
    5.?清除浮动
    .clearfix:after {
    content: '';
    display: block;
    clear: both;
    }
    .clearfix {
    *zoom: 1; /* 仅对ie67有效 */
    }
    已邀请:

    要回复问题请先登录注册