CSS hack tips ie6-11, Chrome, FireFox, Safari, Opera

CSS hack technology is the use of different browsers different versions of the CSS implementation of the characteristics of the differences to meet the effect we need: in all major browsers display a unified effect, or for a specific browser to display a specific effect.

As we all know, if there are two attributes with the same name in a CSS style selector, the browser typically takes the last attribute.

<style type= "Text/css" >
. css-hack {
background-color:red;
Background-color:blue; /* Final background color shown as blue */
}
</style>
<div class= "Css-hack" >CodePlayer</div>
Of course, there is a premise that the browser must first recognize and support the CSS attribute, the browser does not support CSS properties or values, the browser will be ignored.

This is the implementation principle of CSS hack technology. For example, even if we have an underscore _,ie 6 in front of the property name, we can recognize the property, and only IE 6 can recognize it. So we can take advantage of this feature and let IE 6 achieve some specific effects.

. css-hack {
background-color:red; /* is displayed in red on other browsers/*
_background-color:blue; /* on IE 6 display as blue */
}
Furthermore, because IE 6 does not support the Max-width attribute, the IE6 CSS property value supports expression expressions. Therefore, we can implement the Max-width property effect for IE 60 percent.

. css-hack {
background-color:red;
max-width:200px;
_width:expression (function (Me) {var maxwidth = Me.style.width = (me.offsetwidth <= maxwidth? me.offsetwidth:m Axwidth) + "px"; } (this)); /* _ At the beginning only IE6 can be recognized, for performance reasons, the expression here will only execute once/
}
Below, we will discuss IE 6-11, FireFox, Chrome, Safari, opera and other browsers CSS hack technology, for specific browsers to identify specific properties (domestic browsers generally use IE or chromium kernel, so do not consider).

Note: The following content is collected in the network (collected on the network when found, there's a lot of nonsense on the internet ...) and tested personally to try to be as accurate as possible, but due to a variety of system platforms, language environment, large version, small version and other issues, the author can not guarantee that there is no omission or error. If a reader finds out, please leave a message to inform.
CSS Hack for IE browsers

CSS Hack for all IE browsers

Because all IE browsers can recognize a particular CSS attribute value suffix \9, we can add a \9 suffix (before the end semicolon) to the CSS attribute value, so that only IE can recognize the attribute, and other browsers cannot recognize it and ignore it.

. css-hack {
background-color:red; /* Other browsers are displayed in red * *
Background-color:blue \9; /* All IE browsers appear as blue */
}
CSS Hack for IE 6

There is no doubt, as mentioned above, to underline the attributes of the CSS, which is dedicated to IE6.

. css-hack {
background-color:red; /* Other browsers are displayed in red * *
_background-color:blue; /* Only the IE 6 browser appears as Blue */
}
CSS Hack for IE 7

IE6 and IE7 are able to recognize CSS attribute names with the +, * or # prefix, but IE 7 does not support _ prefixes, and IE6 support. Therefore, we can first write a * attribute, + attribute or # attribute so that IE6, IE7 can recognize, and then write an _ property, only let IE6 recognition, the property value back, so that the former only for IE 7 effective.

. css-hack {
color:red; /* Other browsers are displayed in red * *
+color:blue; /* Only IE 6, IE 7 browser on the display of blue * *
_color:red; /* Let IE 6 be restored to the previously set color * *
}
Note: Some Web pages say that only the attribute prefix with +, *, or # will allow IE 7 to be individually identified. However, after my own test, whether using IE Tester, or specifically download an XP system, with the original IE 6 testing, all indicate: IE6, IE7 can recognize the +, * or # of the attribute prefix.
In addition, it is also said that the IE 7 support!important,ie 6 does not support!important, so you can through the * attribute: value!important, the form of the CSS Hack ie 7.

In fact, this also does not work, because IE 6 does not support!important, but there is a bug, please see IE6 does not support!important and IE6 IE7 (q) IE8 (q) does not fully support the!important rule.

Use!important to achieve IE 7 CSS Hack, must be in the same style selector, and also need to add _ properties to restore the IE 6 settings (this way is still a bit more trouble, the above method is less to write a!important).

. css-hack {
color:red; /* Other browsers are displayed in red * *
*color:blue!important; /* Only IE 6, IE 7 browser on the display of blue * *
_color:red; /* Let IE 6 be restored to the previously set color * *
}
In addition, IE 7 also supports the addition of *+html in front of the selector, allowing the current selector to become the *+html's successor selector, only IE 7 can identify such a style selector (which is said to be recognizable by some older opera browsers, but these versions are already dead and need not be considered).

. css-hack {
color:red; * * Other browsers display red/
}
*+html. Css-hack {
Color:blue; /* Only IE 7 shows blue */
}
IE 7 also supports adding *:first-child+html to the selector, allowing the current selector to become the *:first-child+html's successor selector.

. css-hack {
color:red; * * Other browsers display red/
}
*:first-child+html. Css-hack {
Color:blue; /* Only IE 7 shows blue */
}
CSS Hack for IE 8

Only IE8 supports nesting of the following @media type query statements: @media \0screen.

. css-hack {
color:red; * * Other browsers display red/
}

@media \0screen {
. css-hack {Color:blue}//* Only IE 8 shows blue */
}
CSS Hack for IE 9

Didn't find a reliable one.

CSS Hack for IE 10

Didn't find a reliable one.

CSS Hack for IE 11

Didn't find a reliable one.

IE 6 + IE 7 CSS Hack

As mentioned above, only IE 6, IE 7 can identify the attribute prefix with a + or * number.

. css-hack {
color:red; * * Other browsers display red/
*color:blue; /* IE 6, IE 7 is shown as Blue * *
}
FireFox, Chrome, Safari, opera css Hack

Firefox's CSS Hack

Firefox supports nesting of its proprietary CSS statements: @-moz-document Url-prefix ().

. css-hack {
color:red; * * Other browsers display red/
}

@-moz-document Url-prefix () {
. css-hack {
Color:blue; /* Only Firefox is shown as Blue * *
}
}

CSS Hack for Chrome, Safari, and other WebKit kernel browsers

Browsers that use the WebKit kernel for Chrome, Safari, and so on support media type query statements: @media screen and (-webkit-min-device-pixel-ratio:0).

. css-hack {
color:red; * * Other browsers display red/
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
. css-hack {
Color:blue; /* WebKit Kernel browser displays blue */
}
}