1.什么是 CSS hack
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号。由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
例如下面“\9”的使用：
#tip{ background:blue;/*非IE背景蓝色 因为所有浏览器都能解释*/ background:red\9;/*IE6、IE7、IE8、IE9背景紅色 因为\9在IE6.7.8.9中可以识别，覆盖上面样式 IE10跟11应该不识别，IE11测试确定*/ }
2.浏览器兼容的思路
1.要不要做：从产品的角度：产品的受众、受众的浏览器比例、效果优先还是基本功能优先；成本的角度 2.做到什么程度：让哪些浏览器支持哪些效果3.如何做：（1）根据兼容需求选择技术框架/库(jquery)；（2）根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)；（3）postCSS；（4）条件注释、CSS Hack、js 能力检测做一些修补4.渐进增强和优雅降级：渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
3.几种浏览器兼容的写法
<!--[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]-->
判断浏览器为ie6时，显示“You are using Internet Explorer 6”，不是ie浏览器时弹出alert，是ie8时添加样式表。
2.选择器前缀法：选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
目前最常见的是：*html 前缀只对IE6生效+html *+前缀只对IE7生效@media screen\9{...}只对IE6/7生效@media \0screen {body { background: red; }}只对IE8有效@media \0screen,screen\9{body { background: blue; }}只对IE6/7/8有效@media screen\0 {body { background: green; }} 只对IE8/9/10有效@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
3.属性前缀法：属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
.box{
color: red;
_color: blue;
/*ie6*/ *color: pink;
/*ie67*/ color: yellow\9;
/*ie/edge 6-8*/
}
4.html5shiv.jsHtml5shiv，指的是HTML 5标签结构，使ie低版本浏览器可以支持HTML 5。例如引用Google的html5.js文件
<!--[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
< ![endif]-->
5.Modernizr：一个开源的JS库，它使得浏览器兼容工作变得更为简单。在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的 标签的类型和属性等。在获取到这些信息的基础上，可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。当Modernizr运行时，它会把这个“no-js”的类变为“js”来使你知道它已经运行，还会为所有它检测过的特性添加class类，如果浏览器不支持某个特性，它就为该特性对应的类名加上“no-”的前缀。例如：
<html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface">
4.以下工具/名词是做什么的
条件注释：条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
IE Hack：使用特殊的符号或者方式写出只有IE浏览器可以解析的代码，有CSS属性前缀法、选择器前缀法以及IE条件注释法。
js能力检测：使用JS的语法检测浏览器支持的属性，以便展示效果
html5shiv.js：Html5shiv，指的是HTML 5标签结构，低版本的浏览器不支持某种标签，就可以通过html5shiv.js创建新的标签，实现同样的效果。
respond.js：模拟css3媒体查询，让IE6和7支持媒体查询达到同样的效果。
css reset：通过重新定义标签样式，“覆盖”浏览器的CSS默认属性。
normalize.css：Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
Modernizr：Modernizr是一个js库，它会自动检测特性并添加class类，如果浏览器不支持某个特性，它就为该特性对应的类名加上“no-”的前缀。而开发者只需自定义带有“no-"前缀的类来设定当浏览器不支持某种特性时的备用样式。
postCSS：PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。
5.查询属性兼容性的网站？
网友评论