CSS browser compatibility issue summary

### Foreword

Front-end development done almost without exception are not compatible with all versions of CSS in the pit too, but fortunately there are predecessors great God who invented a variety of CSS hack syntax to help us solve these problems.

These will now summarize the usage of CSS hack.

### CSS hack usage

#### 1, a single browser is not compatible

##### 1.1- IE5

In IE5 above, compatibility issues encountered major problems is centered DIV element, we know that in IE6 and above, and other modern browsers, support is xhtml standard, it can be achieved DIV centered in the following way:

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

or:

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

Both methods are the use of the principles of right and left margin in the case of standard attributes will default auto margins equal elements to achieve.

However, IE5 uses html4.0 standard does not support this feature, it will lead element can not be centered on the page, but we can use a more old-fashioned way to achieve:

    body {
        text-align:center;
    }

But this may be a side effect of all page elements have inherited characteristics of the text on the other the default is centered. Fortunately, IE6 and IE5 has now been eliminated a long time, where we can know whether their principles on it.

Really need to use if (! Quickly for it to work), you can use the following methods (IE6 will also change, and then give IE6 set up a separate style reduction):

* html body{
    text-align: center;

}

##### 1.2- IE6

If your css in other browsers are normal, but not normal in IE6, then you can use the following method under IE6 style defined separately without affecting the presentation of the other browsers.

The first: "-" prefix Law

    .demo {
        -width:100px;
    }

The second: HTML comments Law (written in HTML pages, style suitable for the application of only one page)

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

##### 1.3- IE7 (IE7 only identification)

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

#####1.4 - firfox

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

##### 1.5 - chrome (actually only webkit core support all browsers)

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

#### 2, both browsers are not compatible

##### 2.1-IE6 / IE7: "*" prefix (normal mode, if the promiscuous mode, all supported IE)

    .demo {
        *color: red;
    }

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

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

3 compatible #### three and above browsers

##### 3.1 all browsers except for 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 more

    :root .demo 
    {
        color: red;
    }

#### 4.CSS3 support

Since IE8 previous versions of IE do not support the new CSS3 properties, although there are individual properties using IE filter may be barely achieved (eg background-size), but still not satisfactory. So let IE8 previous versions of IE support the new CSS3 properties, the best way is by means of javascript, use conditional comments to France to achieve the desired effect for a specific version of the browser when the page is loaded.

Original: Large column  CSS browser compatibility issue summary