css Hack IE6/7/8/9/10 Hack分别是什么 解释：css hack *不同的浏览器、或者说同一浏览器的不同版本对css的支持不同 *利用这种不同，使得同一段代码可以在不同的浏览器上都能得到正确的展现 1、条件注释Hack 2、属性前缀Hack 3、选择器前缀Hack
第一种：条件注释Hack html代码
<!--[if IE 6]> <p>这里的代码只会出现在IE6中</p> <![endif]--> <!--[if IE 8]> <p>这里的代码只会出现在IE8中</p> <![endif]--> <!--[if lte IE 8]> <p>这里的代码只会出现在IE8及以下中</p> <![endif]-->gt 大于 gte 大于等于 lt 小于 lte 小于等于 ！ 不等于
第二种：属性前缀Hack
div { width: 100px; height: 100px; /* 表示缺省显示 */ background-color: #f00; /* IE8显示为绿色 使用：\0 支持IE 8/9/10/11 */ background-color: #0f0\0; /* IE9显示为蓝色 使用：\9\0 支持IE 9/10/11*/ background-color: #00f\9\0; /* IE7显示为黑色 使用：* 支持IE 6/7 */ *background-color: #000; /* IE6显示为黄色 使用：_ 支持IE 5/6 */ _background-color: #ff0; }第三种：选择器前缀Hack
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html div{ width: 100px; height: 100px; /* 缺省显示 */ background-color: #f00; } *html div{ /* IE6显示为绿色 使用：*html 支持：IE6 */ background-color: #0f0; } *+html div{ /* IE7显示为蓝色 使用：*+html 支持：IE7 */ background-color: #00f; } @media \0screen { #div1{ /* IE8显示为黑色 使用：@media \0secreen 支持：IE8 */ background-color: #000; } } @media screen and (min-width:0){ #div1{ /* IE9\10显示为黄色 使用：@media screen and (min-width:0\0) 支持：IE9\10 */ background-color: #ff0; } } @media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){ #div1{ /* IE10+ 显示为豆沙色 使用：@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) 支持：IE10+ */ background-color: #bfa; } } </style> </head> <body> <!--[if IE 6]> <p>这里的代码自会出现在IE6中</p> <![endif]--> <!--[if IE 8]> <p>这里的代码自会出现在IE8中</p> <![endif]--> <!--[if lte IE 8]> <p>这里的代码自会出现在IE8及以下中</p> <![endif]--> <div id="div1"></div> </body> </html>