[Original] spoofing browser CSS (latest compatible) has been updated

Browser compatibility has always been a headache. Using the "spoofing" technology can make the effects of various browsers consistent, and it took some time to sort out the hack of Each browser, it mainly includes the IE series and the latest versions of chrome, Safari, Firefox, and opera. It comprehensively records hack, including @ hack, attribute hack, and Selector hack, these hack has been tested and used effectively. If you need it, you can use it with confidence. I will keep updating it in the future. If you need to add or modify it, please kindly advise!

Spaces between the following codes are necessary. If spaces are missing, the Code becomes invalid.

/* --------------------------------- @ Hack [[---------------------------------*/

@ Media all and (min-width: 0) {selector {}}/* supports ie9, chrome, Safari, Firefox, and opera */

@ Media screen and (-WebKit-Min-device-pixel-ratio: 0) {selector {}}/* only supports wekit kernel browsers chrome and Safari */

@ Media all and (-WebKit-Min-device-pixel-ratio: 10000), not all and (-WebKit-Min-device-pixel-ratio: 0) {selector {}}/* only supports opera */
@-Moz-document URL-prefix () {selector {}}/* only supports Firefox */

For example:

<P class = "class"> @ hack </P>
<Style type = "text/CSS">
@ Media all and (min-width: 0) {/* The text color in ie9 is red */. class {color: # f00 ;}@ media screen and (-WebKit-Min-device-pixel-ratio: 0) {/* The text color in chrome and Safari is green */. class {color: #0f0 ;}@ media all and (-WebKit-Min-device-pixel-ratio: 10000 ), not all and (-WebKit-Min-device-pixel-ratio: 0) {/* in opera, the text color is blue */. class {color: # 00f ;}@-moz-document URL-prefix () {/* in Firefox, the text color is in red */. class {color: # f0f ;}}

</Style>

/* --------------------------------- @ Hack] --------------------------------- */

 

/* --------------------------------- Selector hack [[---------------------------------*/

HTML * selector {}/* only supports IE7 */

* + HTML selector {}/* only supports IE7. To use this selector, a declaration is required at the top of the HTML: <! Doctype HTML ......> */

* HTML selector {}/* only supports IE6 */

For example:

<P class = "class"> selector hack </P> HTML *. class {color: # f00;}/* In IE7, the text color is red */* + HTML. class {color: #0f0;}/* In IE7, the text color is green */* HTML. class {color: # 00f;}/* in IE6, the text color is blue */

/* --------------------------------- Selector Hack] ------------------------------- */

 

 

/* --------------------------------- Attribute hack [[---------------------------------*/

Selector {attribute: attribute value \ 9;}/* supports IE6 + */

Selector {attribute: property value \ 0;}/* only supports IE8 and ie9 */

Selector {attribute: attribute value \ 9 \ 0;}/* only supports ie9 */

Selector {* attribute: attribute value;}/* only supports IE7 and IE6 */

Selector {_ attribute: attribute value;}/* only supports IE6 */

Selector {attribute: attribute value! Important;}/* Only IE6 is not supported */

Selector {[; attribute: attribute value;]}/* only supports safari and chrome, and can only be placed in the last attribute of the selector, because after the browser parses, will not read the following attributes */

For example:

<P class = "class"> attribute hack </P> <style type = "text/CSS">

. Class {color: # f00 \ 0;/* In IE8 and ie9, the text color is red */* color: #0f0; /* In IE7, the text color is green */_ color: # 00f;/* in IE6, the color is blue */[; color: # f0f;] /* in Safari and chrome, the color is red */}

</Style>

 

/* --------------------------------- Attribute Hack] --------------------------------- */

 

The final suggestion is: Try to write the structures and styles without hack, so that they can be backward compatible, reduce unnecessary code, and reflect their own professional attitude.