浏览器兼容12

1.什么是 CSS hack

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同样式的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。这个过程就是CSS hack

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法

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

• 要不要做
  产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
  成本的角度 (有无必要做某件事)

• 做到什么程度
  让哪些浏览器支持哪些效果

• 如何做

• 根据兼容需求选择技术框架/库(jquery)
  Bootstrap (>=ie8)
  jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
  Vue (>= ie9)
• 根据兼容需求选择兼容工具
  html5shiv.js
  respond.js
  css reset
  normalize.css
  Modernizr
  postCSS
• 条件注释、CSS Hack、js 能力检测做一些修补
• 渐进增强和优雅降级的选择

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

常见属性的兼容情况

inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10
caniuse.com 查CSS属性兼容

IE条件注释

项目	范例	说明
！	[if !IE]	非IE
lt	[if lt IE 5.5]	小于IE 5.5
lte	[if lte IE 6]	小于等于IE6
gt	[if gt IE 5]	大于 IE5
gte	[if gte IE 7]	大于等于IE7

“|” [if (IE 6)|(IE 7)] ：IE6或者IE7
如下例：

    <!--[if IE 6]>
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!-->
    <script>alert(1);</script>
    <!--<![endif]-->

属性选择器

box{
 color: red; 
 _color: blue; /*ie6*/
 *color: pink; /*ie67*/ 
 color: yellow\9; /*ie/edge 6-8*/}

选择器前缀法

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效

容器坍塌

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}

inline-block属性

.target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

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

条件注释：

html源码中被IE浏览器有条件解释的语句。条件注释可向IE提供以及隐藏代码

IE Hack：

针对IE浏览器写出的不同的CSS让IE能正常渲染

js 能力检测：

指的是用js语句检测当前浏览器的支持的属性，以便解释渲染

html5shiv.js：

创建元素用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题

respond.js：

让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

css reset：

重新定义标签样式，“覆盖”浏览器的CSS默认属性

normalize.css：

可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一

Modernizr：

modernizr是一套JavaScript库，可以用来检测浏览器对html5和css3的特性有哪些支持哪些不支持。

postCSS：

postcss是通过JavaScript语言对css语句进行处理，然后再用已选用的插件进行处理和显示

5.一般在哪个网站查询属性兼容性？

caniuse.com 查CSS属性兼容
browserhacks.com 查 Hack 的写法