CSS Hack

[color=#345286] 原文出处：[url=http://blog.youkuaiyun.com/arcow/archive/2007/07/06/1681027.aspx]http://blog.youkuaiyun.com/arcow/archive/2007/07/06/1681027.aspx[/url][/color]
[color=#345286] 参考文章：[url=http://www.iteye.com/topic/602506]http://www.iteye.com/topic/602506[/url][/color]

[color=#FF0000][b][size=medium]什么是 CSS Hack[/size][/b][/color]
[color=#345286] 由于不同的浏览器，比如 Internet Explorer 6, Internet Explorer 7, Mozilla Firefox等，对 CSS 的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。[/color]
[color=#345286] 这个时候我们就需要针对不同的浏览器去写不同的 CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。[/color]
[color=#345286] 这个针对不同的浏览器写不同的 CSS code 的过程，就叫 CSS hack，也叫写 CSS hack。[/color]

[color=#FF0000][b][size=medium]CSS Hack 的原理是什么[/size][/b][/color]
[color=#345286] 由于不同的浏览器对 CSS 的支持及解析结果不一样，还由于 CSS 中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的 CSS。[/color]
[color=#345286] 比如 IE6 能识别下划线 _ 和星号 *，IE7 能识别星号 *，但不能识别下划线 _，而 FF 两个都不能认识。等等。[/color]
[color=#345286] 书写顺序，一般是将识别能力强的浏览器的 CSS 写在后面。下面如何写里面说得更详细些。[/color]

[color=#FF0000][b][size=medium]如何写 CSS Hack[/size][/b][/color]
[color=#345286] 比如要区分 IE6 和 FF 两种浏览器可以这样写：[/color]

<style>
  div {
    background: green; /* for FF */
    *background: red;  /* for IE6 */
  }
</style>

[color=#345286] 上面的 css 在 FF 中，它是认识不了后面的那个带星号 * 的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是: div { background: green }，于是理所当然这个 div 的背景是绿色的。[/color]
[color=#345286] 在 IE6 中呢，它两个 background 都能识别出来，它解析得到的结果是: div { background: green; background: red; }， 于是根据优先级别，处在后面的 red 的优先级高，于是，IE6 下的 div 的背景颜色就是红色的了。[/color]

[color=#FF0000][b][size=medium]CSS hack: 区分IE6，IE7，FF[/size][/b][/color]

// 区分 IE6 与 FF
background: orange;
*background: blue;

// 区分 IE6 与 IE7
background: green!important;
background: blue;

// 区分 IE7 与 FF
background: orange;
*background: green;

// 区分 FF，IE7，IE6
background: orange;
*background: green!important;
*background: blue;

[color=#345286][b]IE 都能识别 *; 标准浏览器(如 FF)不能识别 *[/b][/color]
[color=#345286][b]IE6 能识别 *，但不能识别 !important[/b][/color]
[color=#345286][b]IE7 能识别 *，也能识别 !important[/b][/color]
[color=#345286][b]FF 不能识别 *，但能识别 !important[/b][/color]

[table]
| [color=#345286][b]浏览器[/b][/color] | [color=#345286][b]IE6[/b][/color] | [color=#345286][b]IE7[/b][/color] | [color=#345286][b]FF[/b][/color] |
| [color=#345286]*[/color] | [color=#345286]√[/color] | [color=#345286]√[/color] | [color=#345286]×[/color] |
| [color=#345286]!important[/color] | [color=#345286]×[/color] | [color=#345286]√[/color] | [color=#345286]√[/color] |
[/table]
[color=#345286] 另外再补充一个，下划线 "_"。IE6 支持下划线，IE7 和 FF 均不支持下划线。于是大家还可以这样来区分 IE6，IE7，FF：[/color]

background: orange;
*background: green;
_background: blue;

[color=#345286] 注：不管是什么方法，书写的顺序都是 FF 的写在前面，IE7 的写在中间，IE6 的写在最后面。[/color]