CSS浏览器兼容问题总结

前言

做过前端开发的几乎无一例外都被CSS在各个版本的不兼容坑过，还好有前辈大神们发明了各种各样的CSS hack语法来帮助我们解决这些问题。

现将这些CSS hack的用法总结一下。

CSS hack 用法

1、单个浏览器不兼容

1.1- IE5

在IE5上面，遇到的主要兼容问题就是DIV元素的居中问题，我们知道，在IE6及以上版本和其他现代浏览器中，支持的是xhtml标准，所以都可以用下面的方式实现DIV居中：

    .demo { width:80%; magin:0 auto; }

或者：

    .demo { position: relative; magin:0 auto; }

这两种方式都是利用了标准中默认情况下margin的auto属性会让元素左右边距相等的原理来实现。

但是，IE5采用的是html4.0的标准，并不支持这一特性，就会导致元素无法在页面中居中，但我们可以用一种更古老的方式去实现：

    body { text-align:center; }

但是这样可能会有副作用，即页面中所有具有继承特性的元素中的文本就等默认为居中对齐了。好在现在IE6及IE5已经被淘汰很久了，我们在这里能够知悉其原理就可以了。

真有需要用到的话（赶紧换工作吧！），可以用以下方法(会同时改变IE6,然后再给IE6单独设置样式还原)：

* html body{ text-align: center; }

1.2- IE6

如果你的css在别的浏览器中都正常，只是在IE6下不正常，那么，就可以采用以下方法单独定义IE6下的样式而不会影响在其他浏览器下的呈现。

第一种：”-“前缀法

    .demo { -width:100px; }

第二种：HTML注释法（写在HTML页面中，适合该样式只应用一个页面的情况）

    <!--[if IE 6]> <style> .demo { width:100px; } </style> <![endif]-->

1.3- IE7（只有IE7识别）

    *+html .demo {background: green;} 
    //或者： 
    *:first-child+html .demo {background: green;}

1.4 - firfox

    @-moz-document url-prefix() { 
        .demo { color: red; } }

1.5 - chrome （实际上是仅支持所有webkit内核浏览器）

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    #test1{ color:red; }
    }

2、两种浏览器不兼容

2.1-IE6/IE7:”*”前缀（标准模式下，如果是混杂模式，则所有IE都支持）

    .demo { *color: red; }

2.2-IE7/IE8（selector { property/*/:value9;}）

    .demo {
        color/***/:red9;
    }

3、三种及以上浏览器的兼容

3.1 除IE6以外的所有浏览器：

    html>body .demo {
        color: green;
    }
//或者

    .demo {
        color/**/:red;
    }

3.2 IE8-9,Firefox,Safari,Opear

html>/**/body .demo 
{ background: red; }

3.3 IE6/IE7/IE8/IE9

    .demo { color: red9; }

3.4 IE9以上

    :root .demo 
    { color: red; }

4.CSS3支持

由于IE8以前的IE版本都不支持CSS3的新属性，虽然有个别属性利用IE的filter也可以勉强实现（例如background-size），但还是不尽如人意。所以要让IE8以前的IE版本支持CSS3新增属性，最好的方式是借助javascript，利用条件注释法来在页面载入时针对特定版本浏览器来实现想要的效果。