Seconds to kill everything CSS hack

Before the Baidu Blog wrote a summary of the CSS hack, CSS, a variety of hack do a summary of the recent browser many times do not consider IE6, IE6 in a long period of time, his compatibility let a lot of front-end staff headache!

Read a lot of people have written against IE6 hack is "_" underline, in fact, I do CSS layout 2 years ago when I found that the IE7 is also to identify the underlined, and sometimes IE6 adjusted well, but IE7 in the problem. in fact, the hack for IE7 is " *+ " ; for example: *+color:red;

As follows:

Many times now you can also use the following notation:

    <!--[if IE 6]><link href= "intro_css/ie/ie6.css" rel= "stylesheet" type= "Text/css"/>    <![ endif]--><!--[If IE 9]><link href= "intro_css/ie/ie9.css" rel= "stylesheet" type= "Text/css"/><! [endif]--><!--[If IE 8]><link href= "intro_css/ie/ie8.css" rel= "stylesheet" type= "Text/css"/><! [endif]--><!--[If IE 7]><link href= "intro_css/ie/ie7.css" rel= "stylesheet" type= "Text/css"/><! [endif]--><!--[If Ie]><link href= "Intro_css/ie/ie.css" rel= "stylesheet" type= "Text/css"/><! [endif]--><!--[If Lt IE 9]><script src= "Intro_js/html5_shrrr.js" ></script> <! [endif]-->

Google actually has a lot of unique wording, other browsers do not recognize!

For example:

@media screen and (-webkit-min-device-pixel-ratio:0) {. Red {color: #ff0000;}}

Only Google browser recognition!

In addition, Google a lot of special usage, IE will not appear, for example, for Google's rolling axis modification!

::-webkit-scrollbar{    padding-left:1px;    Background-color: #fafafa;    overflow:visible;    width:9px;}::-webkit-scrollbar-thumb{    Background-color:rgba (0, 0, 0,. 1);    Background-clip:padding-box;    border-left-width:2px;    min-height:10px;    Box-shadow:inset 1px 1px 0 rgba (0, 0, 0,. 1), inset 0-1px 0 rgba (0, 0, 0,.);}::-webkit-scrollbar-thumb:vertical:hover{< C9/>background-color:rgba (0, 0, 0,. 2);}::-webkit-scrollbar-thumb:vertical:active{    Background-color:rgba (0, 0 , 0,. 2);}::-webkit-scrollbar-button{    height:0;    width:0;}::-webkit-scrollbar-track{    Background-clip:padding-box;    Border:solid Transparent;    border-width:0 0 0 2px;}::-webkit-scrollbar-corner{    background:transparent;}::-webkit-scrollbar-track-piece{margin:10px 0;- webkit-border-radius:0;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;}

See also: http://blog.csdn.net/confidence68/article/details/33735145

There are also Google browser sound input and so on, such as:

<input type="Text" class="box" name="S" ID="S" class="Inputtext" placeholder="Enter keyword" X-webkit-speech>

Add to

x-webkit-speech  属性就可以了！