css的hack对待不同浏览器

CSS Hack是一种在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的。CSS Hack的作用是使你的CSS代码兼容不同的浏览器，或者为不同版本的浏览器定制不同的CSS效果。

CSS Hack常见的有三种形式：

1.属性级Hack：

在样式属性名或者属性值的前后加前缀或者后缀来识别不同的浏览器，比如IE6能识别下划线“ _ ”和星号“ * ”，IE7能识别星号“ * ”，但不能识别下划线” _ ”，而firefox两个都不能认识。

2.选择符级Hack：

在样式选择器中加入一些特殊的符号或者结构来识别不同的浏览器，比如IE6能识别 *html .class {} ，IE7能识别 *+html .class {} 或者 *:first-child+html .class {} 。

3.条件Hack：

在HTML头部引入hack，使用HTML条件注释判断浏览器版本，比如针对所有IE： <!- [if IE]><!-您的代码-><! [endif]> ，针对IE6及以下版本： <!- [if it IE 7]><!-您的代码-><! [endif]-> ，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

一些CSS Hack的例子：

• 属性级Hack：比如要区分IE6，IE7，IE8，IE9，IE10和Firefox，可以这样写：

.demo {
  color: green; /* All browsers */
  color: blue\9; /* IE6-IE10 */
  color: red\0; /* IE8-IE10 */
  color: pink\9\0; /* IE9-IE10 */
  _color: yellow; /* IE6 */
  *color: orange; /* IE6-IE7 */
}

• 选择符级Hack：比如要区分IE6，IE7和Firefox，可以这样写：

* html .demo { color: green; } /* IE6 */
*+html .demo { color: blue; } /* IE7 */
body:nth-of-type(1) .demo { color: red; } /* Firefox */

• 条件Hack：比如要针对不同版本的IE浏览器引入不同的CSS文件，可以这样写：

<!-- [if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<! [endif]-->
<!-- [if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<! [endif]-->
<!-- [if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<! [endif]-->
<!-- [if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8+.css" />
<! [endif]-->

CSS Hack的优点是可以使你的CSS代码兼容不同的浏览器，或者为不同版本的浏览器定制不同的CSS效果。
CSS Hack的缺点是会增加代码的复杂度和维护成本，以及可能会受到浏览器版本变化而失效或产生新的问题。
因此，CSS Hack应该尽量避免使用，或者只在必要的情况下使用。

避免使用CSS Hack的方法有以下几种：

• 使用标准的HTML和CSS语法，遵循W3C的规范，尽量不使用一些不兼容或不稳定的CSS属性或特性。
• 使用浏览器的前缀，针对一些新的或实验性的CSS属性或特性，使用浏览器厂商提供的前缀，比如-moz-，-webkit-，-ms-等，以保证在不同浏览器下的兼容性。
• 使用CSS预处理器，比如Sass，Less，Stylus等，可以帮助你自动添加浏览器前缀，优化CSS代码，减少重复和冗余。
• 使用CSS重置或归一化，比如reset.css，normalize.css等，可以帮助你消除浏览器之间的默认样式差异，提高页面的一致性。
• 使用JavaScript或jQuery库，比如Modernizr，html5shiv等，可以帮助你检测浏览器的特性支持情况，为不同浏览器添加相应的类名或样式。