css-浏览器兼容

css

1. !important区分FireFox和IE6

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

1
2
3
4
.test {
  color: blue !important;
  color: red;
}

效果就是在火狐显示字体颜色是蓝色，在IE6显示红色。但是 
1
2
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

    1
    2
    3
    div {
        *background: red;// IE6和IE7
    }

针对IE6

1
2
3
div {
    _background: blue;// IE6
}

区分IE6和IE7（也可以用后面提到的html和+html区分）

1
2
3
4
div {
    _background: red;// IE6
    background: blue !important;// IE7已经识别!important
}

  • 选择器前缀法

    IE6识别html，IE7识别+html，所以下面代码

    1
    2
    3
    4
    5
    6
    *html div {//IE6
        background: red
    }
    *+html div {//IE7
        background: blue
    }

  • IE条件注释法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!--[if IE]>
    只在ie下生效
    <![endif]-->

    <!--[if gte IE 6]>
    只在IE6以上(包括)版本IE浏览器显示
    <![endif]-->

    <!--[if !IE 8]>
    只在非IE8浏览器显示
    <![endif]-->

    <!--[if !IE]>
    只在非IE浏览器显示
    <![endif]-->