各种版本浏览器之间对css进行解释之后，网页内容会产生误差，和js一样，一个效果在各个版本浏览器中显示不同，甚至失效。采取的不同css样式来解决这些问题就叫做 CSS hack。
css hack大致可以分为三种表现形式
1. css属性前缀法
\9：所有IE浏览器都支持
_和-：仅IE6支持
*：IE6、E7支持
\0：IE8、IE9支持，opera部分支持
\9\0：IE8部分支持、IE9支持
\0\9：IE8、IE9支持
Demo1
.hack{
/*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/
background-color:red;/* All browsers */
background-color:blue!important;/* All browsers but IE6 */
*background-color:black;/* IE6, IE7 */
+background-color:yellow;/* IE6, IE7*/
background-color:gray\9;/* IE6, IE7, IE8, IE9, IE10 */
background-color:purple\0;/* IE8, IE9, IE10 */
background-color:orange\9\0;/*IE9, IE10*/
_background-color:green;/* Only works in IE6 */
*+background-color:pink;/* WARNING: Only works in IE7 ???*/
}
Demo2
.iehack{
background-color:orange;/* all - for Firefox/Chrome */
background-color:red\0;/* ie 8/9/10/Opera - for ie8/ie10/Opera */
background-color:blue\9\0;/* ie 9/10 - for ie9/10 */
*background-color:black;/* ie 6/7 - for ie7 */
_background-color:green;/* ie 6 - for ie6 */
}
2. 选择器前缀法
选择器前缀法，例如IE6能识别*html .class{}，IE7能识别*+html .class{}
??为什么和css属性前缀 不一致
@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. IE条件注释法
对所有判断语句内的代码生效（不仅只有css）
针对所有ie（ie10+已经不再支持）
<!--[if IE]>ie浏览器显示内容<![endif]-->
<!--[if lt IE 6]>ie6以下显示的内容<![endif]-->
<!--[if gte IE 6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->
这段文字只在IE6以上(包括)版本IE浏览器显示这段文字只在IE6以上(包括)版本IE浏览器显示<!--[if IE 6]>在IE6浏览器显示<![endif]-->
<!--[if ! IE 8]>在非IE8浏览器显示<![endif]-->
<!--[if !IE]>在非ie浏览器<![endif]-->
