什么是浏览器的兼容问题：
同一份代码有的浏览器效果正常，有的不正常。由于不同的浏览器对CSS的支持及解析结果不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果
不正常的原因：
1、浏览器不支持，新属性、框架
2、同一浏览器产品，版本越老bug越多
3、同一浏览器产品，版本越新，功能越多
4、不同浏览器产品，不同标准，不同实现方式
什么是 CSS hack
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，比如.kwstu{width:300px;_width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别_width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px;
简单地讲，css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。由于各浏览器的内核不同，所以会造成一些误差就像JS一样，一个JS网页特效，在微软IE6、IE7、IE8浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌浏览器无效，这样就叫做JS hack ，所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。
浏览器识别字符标准对应表如下图：
从上图可以分析出以下几种情况：
1、大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。
2、\9 ：所有IE浏览器都支持
3、_和- ：仅IE6支持
4、* ：IE6、E7支持
5、\0 ：IE8、IE9支持，opera部分支持
6、\9\0 ：IE8部分支持、IE9支持
7、\0\9 ：IE8、IE9支持
IE浏览器下hack总结
element{
color：#666\9； //IE8 IE9
* color：#999； //IE7
_color:#EBEBEB； //IE6
}
可以看出，利用字符识别无法区分IE8和IE9，我们可以从伪类的识别来区分
element{
color：#666\9； //IE8
* color：#999； //IE7
_color:#EBEBEB； //IE6
}
:root element{color：#666\9;}//IE9
【说明】：“:root”伪类IE系列只有IE9支持，其他主流浏览器均支持，利用这一点来区分IE8和IE9。另外考虑到opera部分支持，完全支持:root,所以不使用。
谈一谈浏览器兼容的思路
1、从产品的角度和成本的角度来判断要不要做浏览器兼容
产品的受众？受众使用的浏览器的比例。产品的效果优先还是基本功能优先？以及你做这件事情的成本，时间成本等来判断是否要做这件事情。
2、如果做的话要做到什么程度？
你要考虑让那些浏览器支持哪些效果。
3、如何做？
根据兼容需求选择技术框架、库（jQuery。。。。）
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
条件注释、CSS Hack、js 能力检测做一些修补
列举5种以上浏览器兼容的写法
1.区别IE和非IE浏览器
#tip{
background:blue;/非IE背景蓝色 因为所有浏览器都能解释/
background:red\9;/IE6、IE7、IE8、IE9背景紅色 因为\9在IE6.7.8.9中可以识别，覆盖上面样式 IE10跟11应该不识别，IE11测试确定/
}
2.区别IE6,IE7,IE8,FF
【区别符号】：“\9”、“”、“_”
#tip{
background:blue;/Firefox背景变蓝色 所有浏览器都支持/
background:red\9;/IE8背景变红色 IE6、7、8、9支持覆盖上面样式/
background:black;/IE7背景变黑色 IE6、7支持又一次覆盖上面样式/
_background:orange;/IE6背景变橘色 紧IE6支持又一次覆盖上面样式/
}
3、条件注释法：
<script>alert(1);</script>
4、属性前缀法：
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
5、CSS Reset
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
以下工具/名词是做什么的
条件注释
条件注释 (conditional comment) 是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码
IE Hack
使用特殊的符号或者方式写出只有IE浏览器可以解析的代码，有CSS属性前缀法、选择器前缀法以及IE条件注释法
js 能力检测
使用JS的语法检测浏览器支持的属性，以便展示效果
html5shiv.js
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
respond.js
让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
css reset
通过重新定义标签样式，“覆盖”浏览器的CSS默认属性
normalize.css
Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
Modernizr
Modernizr是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。
postCSS
PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。
一般在哪个网站查询属性兼容性？
CSS属性兼容查询网站：http://caniuse.com/
