CSS hack

什么是浏览器兼容问题

同一份代码，有的浏览器效果正常，有的不正常

• 不正常的原因是什么？(不支持? bug？)
• 如何让它展示正常?(条件注释？ 单独Hack？)

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

1.属性前缀发：例如IE6能识别下划线""和星号"",IE7能识别"",但不能识别下划线"",IE6~10都识别"\9",但firefox前述三个都不能认识。
2.选择器前缀法即选择器hack
3.IE条件注释法:针对所有IE(IE10+已经不支持条件注释)：,针对IE6及以下版本: 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

常见hack写法

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

常见属性的兼容情况

inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
background-size: >=ie9
圆角: >=ie9
阴影: >=ie9
动画/渐变: >=ie10

常见兼容处理范例

1.兼容IE67的清除浮动

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

2.IE67实现inline-block效果

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

3.针对不同的IE版本导入不同的script等

与兼容相关的兼容利器
1.html5shiv
2.respond
3.css reset与Normalize请参考这篇文章：https://segmentfault.com/a/1190000003021766
4.Modernizr请参考Github：https://github.com/Modernizr/Modernizr