Big collection of CSS Hack

Hack is a frequently used technology in CSS writing. The reason why Hack occurs is that the resolution of various browsers is proprietary. This is also one of the magic of CSS. However, although Hack is so easy to use, as the front-end code writing, it is absolutely quick and accurate to solve the problem, but it is not recommended for everyone to use Hack. The Hack technology is to write different styles for different browsers to achieve different rendering effects. To achieve different rendering effects for each browser, you can use the conditional style or Hack. The following are some of my Hack methods. 1. Firefox [css] @-moz-document url-prefix (){. div1 {width: 30px;} supports several other methods of Firefox: [css]/* supports all firefox versions */# div1 [id = div1] {width: 30px ;} or [css] @-moz-document url-prefix (){. div {width: 30px;} or [css]/* browsers supporting all Gecko kernels (including Firefox) */*>. div1 {width: 30px;} 2. Webkit secure core browser (chrome and safari) [css] @ media screen and (-webkit-min-device-pixel-ratio: 0) {div {width: 30px;} is written mainly for the Webkit kernel. Google Chrome and Safari: [css] @ media screen and (-webkit-min-device-pixel-ratio: 0) {div {width: 30px ;}} 3. operabrowser does not have any Hack. I have tried the Hack of Opera on the Internet and it does not work. It's hard to work with Opera. Generally, browsers work. If you have any Hack for Opera, please share it. 4. IE9 browser [css]: root div {height: 300px \ 9;} 5, IE9 and later versions of IE9 [css] div {height: 300px \ 9 ;} 6. IE8 browser [css] div {height: 300px/;} or [css @ media \ 0 screen {div {height: 300px ;}} 7. IE8 and later versions [css] div {height: 300px \ 0;} 8. IE7 browser [css] * + html div {height: 300px; background: red;} or [css] *: first-child + html div {height: 300px;} 9, IE7 and IE7 or earlier browsers [css] div {* height: 300px ;} 10. IE6 browser [css] div {_ height/**/:/**/300px;} or [css] Div {_ height: 300px;} or [css] * html div {height: 300px;} The content above shows how to identify various Hack statements in browsers of various versions I have collected, it includes modern browsers and amazing browsers. Next, the CSS selector and CSS attribute selector are supported in different browsers. 1. IE6 [css] * html div {background: red;} 2. Only IE7 browser [css] *: first-child + html div {background: red;} 3. All browsers (IE7-9, Firefox, Safari, Opera) except IE6 [css] html> body div {background: red;} 4, IE8-9, Firefox, Safari, Opear [css] html>/**/body div {background: red;} 5, IE9 + [css]: root div {background: red;} 6. Firefox [css] @-moz-document url-prefix () {div {background: red;} 6. Webkit Kernel Browser (Safari and Google Chrome) [css] @ media screen and (-webkit-min-device-pixel-ratio: 0) {div {background: red ;}} 7. operabrowser does not have Hack. I have tried the Hack of Opera on the Internet and it does not work. It's hard to work with Opera. Generally, browsers work. If you have any Hack for Opera, please share it. 8. iPhone/mobile webkit [css] @ media screen and (max-device-width: 480px) {div {background: red ;}} the above section describes how to write Hack about CSS in various browsers. The base is for modern browsers such as Safari, google Chrome and Firefox are also written by the Internet Explorer family, which is the most annoying by the front-end. Below are some comprehensive tips: 1. Method 1: [css] div {height: 300px; background: red;/* all modern browsers */background: green \ 9; /* all IE browsers */background: lime \ 0;/* IE8-9 browser Opera */* background: red;/* IE6-7 browser */+ background: blue; /* IE7 browser */_ background: orange;/* IE6 browser */} @ media all and (min-width: 0px) {background: #000; /* Webkit and operabrowser */} @ media screen and (-webkit-min-device-pixel-ratio: 0) {background: # f36; /* Webkit kernel browser */} @-moz- Document url-prefix () {div {background: # ccc;}/* all firefox */} 2. Method 2: 1. Create a conditional style sheet, add the corresponding class name HTML code to the body in HTML: [html] <! -- [If IE6]> <body class = "ie6"> <! [Endif] --> <! -- [If IE7]> <body class = "ie7"> <! [Endif] --> <! -- [If IE8]> <body class = "ie8"> <! [Endif] --> <! -- [If IE9]> <body class = "ie9"> <! [Endif] --> <! -- [If! IE]> <body class = "non-ie"> <! [Endif] --> CSS code: [css] div {height: 30px; background: blue;}/* modern browser */. non-ie div {background: red;}/* browsers except IE */. ie9 div {background: yellow;}/* IE9 browser */. ie8 div {background: green;}/* IE8 browser */. ie7 div {background: orange;}/* IE7 browser */. ie6 div {background: lime;}/* IE6 browser */@ media all and (min-width: 0px) {div {background: black ;} /* webkit and opera */} @ media screen and (-webkit-min-device-pixel-ratio: 0) {div {background: #369;}/* webkit */} @-moz-document url-prefix () {div {background: #963 ;} /* firefox */} and above are some tips on CSS Hack that I have collected and sorted out. I hope to help you and solve your urgent needs. Don't use Hack unless you have.