1.什么是 CSS hack？
因为不同浏览器或者不同版本的浏览器所支持的CSS是有区别的，我们利用CSS Hack来使我们的页面更好的在浏览器上展示。
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
1.属性前缀法(即类内部Hack)：例如 IE6能识别下划线_和星号*，IE7能识别星号*，但不能识别下划线_，IE6~IE10都认识\9，但firefox前述三个都不能认识。
2.选择器前缀法(即选择器Hack)
3.IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：``。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
2.谈一谈浏览器兼容的思路
- 首先，要确定是否需要做浏览器兼容。
产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度 (有无必要做某件事) - 其次，思考要做到什么程度。
让哪些浏览器支持哪些效果。 - 最后，要怎么做。
根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
条件注释、CSS Hack、js 能力检测做一些修补
3.列举5种以上浏览器兼容的写法
1.属性前缀法
.box{ color: red; _color: blue; /* ie6 */ *color: pink; /* ie6 ie7*/ color: yellow\9; /*ie/edge 6-8 */ }
2.条件注释法（ie10以上不再支持条件注释）
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->`
3.清除浮动
.clearfix:after{ content: ''; display: block; clear: both; } .clearfix{ *zoom: 1; /* 仅对ie67有效 */ }
4.设置元素宽高
.target{ display: inline-block; *display: inline; *zoom: 1; }
5.利用html5shiv、respond
6.利用Modernizr
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
4.以下工具/名词是做什么的
- 条件注释
条件注释是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。 - IE Hack
针对IE浏览器编写不同的CSS让IE能够正常渲染。 - js 能力检测
浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。 - html5shiv.js
解决ie9以下版本的浏览器对html5标签无法识别的问题。 - respond.js
提供一个小脚本，以便在不支持CSS3媒体查询的浏览器中启用响应式网页设计，特别是ie8及更低版本。 - css reset
重置浏览器默认样式。 - normalize.css
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。 - Modernizr
Modernizr是一套JavaScript 库，用来侦测浏览器是否支持HTML5与CSS3等规格。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。 - postCSS
PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。
5.一般在哪个网站查询属性兼容性？
- 查CSS属性兼容http://caniuse.com/
- 查 Hack 的写法http://browserhacks.com/
网友评论