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

}