css-浏览器兼容

1. !important区分FireFox和IE6

tags: [css]

1. `!important`区分FireFox和IE6

!importIE7已经支持，现在作为区分FF和IE6的标识，在FireFox里!important的权重要高于不加!important的权重；而IE6则不认识!important，所以你加了和不加一样，这样，我们就可以利用这个特点来让两个浏览器显示不同的样式。例如

.test {
  color: blue !important;
  color: red;
}

效果就是在火狐显示字体颜色是蓝色，在IE6显示红色。但是

css
color: blue !important;
color: red;

的顺序不能改变，IE6不认识!important，所以会blue和red权重是一样的，但是red定义晚，因此IE6显示红色。
不过不推荐使用!important，因为它破坏了css原有的优先级规则，使得样式bug的调试更为复杂。以下为几点建议： - Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important - Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important - Never 永远不要在全站范围的 css 上使用 !important - Never 永远不要在你的插件中使用 !important ### 2. CSShack #### CSS hack需要遵循以下三条原则： - 有效：能够通过 Web 标准的验证 - 只针对太古老的/不再开发的/已被抛弃的浏览器，而不是目前的主流浏览器 - 代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则，而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此，并不推荐使用CSS hack来解决兼容性问题。 #### CSS Hack有三种实现方式它们分别是：CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。所以说，IE是所有前端程序员的痛。接下来，我们就以IE6和IE7为例，简单介绍下这三类CSS hack。 - CSS属性前缀法
IE6能识别和， IE7能识别，例如下面代码：
针对IE6和IE7 css div { *background: red;// IE6和IE7 } 针对IE6 css div { _background: blue;// IE6 } 区分IE6和IE7（也可以用后面提到的_html和+html区分）

css
div {
    _background: red;// IE6
    background: blue !important;// IE7已经识别!important
}

- 选择器前缀法
IE6识别html，IE7识别+html，所以下面代码

css
*html div {//IE6
    background: red
}
*+html div {//IE7
    background: blue
}

- IE条件注释法 ```css

```

1. !important区分FireFox和IE6

1. `!important`区分FireFox和IE6