About the compatibility of hack in CSS under different browsers

This article mainly introduces a variety of browser CSS hack compatibility, CSS hack can be broadly divided into internal hack and selectors hack and HTML header reference hack, the need for friends can refer to the next

Because different browsers follow the standards are also different, coupled with the inevitable procedural bugs, economic benefits and other factors of interference. The same page code (HTML + CSS), the display on different browsers is slightly different, or even very different. Even the same browser, the different versions of the display effect is also different, especially ie. This brings a lot of trouble to the front page designers. Developers must take into account all the major browsers in order to show the same or meet the desired effects on different browsers. So the CSS hack technology was born.

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

As we all know, if there are two attributes with the same name in a CSS style selector, the browser generally takes the properties of the last face as the standard.

<style type= "Text/css" >   . css-hack {       background-color:red;       Background-color:blue; /* The final background color is shown in blue */}   </style>   <p class= "Css-hack" >CodePlayer</p>

Of course, there is a premise that the browser must first be able to identify and support the CSS property, for the browser does not support the CSS properties or values, the browser will be ignored.

This is the implementation principle of CSS hack technology. For example, even if we precede the property name with an underscore, _,ie 6 will recognize the attribute, and only IE 6 can recognize it. Therefore, we can use this feature to allow IE 6 to achieve some specific effects.

. css-hack {       background-color:red;/* appears in red on other browsers */    _background-color:blue;/* appears as blue on IE 6 */}

Furthermore, because IE 6 does not support the Max-width property, 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)); /* _ only IE6 can be identified, for performance reasons, the expression here will only be executed once */}

Below, we will explore the Internet Explorer 6-11, FireFox, Chrome, Safari, opera and other browser CSS hack technology, for specific browsers to identify specific properties (domestic browsers generally use IE or the chromium kernel, so it is not considered).

Note: The following content collected in the network (collected on the network when found that the internet is really a lot of nonsense ...), and conducted a personal test to try to ensure the accuracy, but due to various system platforms, language environment, large version, small version and other issues, the author does not guarantee that no omissions or errors. If any readers find out, please leave a message to inform.
The CSS Hack of IE browser

CSS Hack for all IE browsers

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

. css-hack {       background-color:red;/* Other browsers appear in red */    Background-color:blue \9;/* All Internet Explorer displays as Blue */}

CSS Hack for IE 6

There is no doubt that, as mentioned above, the CSS attributes are preceded by an underscore _, which is dedicated to IE6.

. css-hack {       background-color:red;/* Other browsers appear in red */    _background-color:blue;/* Only the IE 6 browser appears as Blue */}

CSS Hack for IE 7

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

. css-hack {       color:red;/* Other browsers appear as Red *    /+color:blue;/* only IE 6, IE 7 browser appears as Blue */    _color:red;/* Let IE 6 restore The color set for the previous */}

Note: Some Web pages say that only the attribute prefixes of +, *, or # can allow IE 7 to be uniquely identified. But after my own test, whether it is with IE Tester, or specifically download an XP system, with the original IE 6 test, all indicate: IE6, IE7 can identify the +, * or # Number of attribute prefixes.
In addition, it is also said that IE 7 support!important,ie 6 does not support!important, so you can use the * attribute: value!important, the form of the implementation of IE 7 CSS Hack.

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

Using!important to implement the CSS Hack of IE 7, it must be in the same style selector, and also need to add _ property in the back to restore the IE 6 settings (this way also troublesome point, the above method also less write a!important).

. css-hack {       color:red;/* Other browsers appear in red *    /*color:blue!important;/* only IE 6, IE 7 browser displayed as Blue *    /_color:red; * Let IE 6 revert to the previously set color */}

In addition, IE 7 also supports the addition of *+html in front of the selector, making the current selector the *+html's successor selector, only IE 7 can recognize such a style selector (it is said that some older versions of the opera browser can also be recognized, but these versions are already dead, no need to consider).

. 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 in front of the selector, making the current selector the successor selector for *:first-child+html.

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 recognize the addition of the + or * number of attribute prefixes.

. css-hack {       color:red;/* Other browsers display red *    /*color:blue;/* IE 6, IE 7 is shown in blue */}

CSS Hack for FireFox, Chrome, Safari, Opera

Firefox's CSS Hack

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

. css-hack {       color:red;/* Other browsers display red *   /} @-moz-document Url-prefix () {       . css-hack {           color:blue;/* Only Fire Fox displayed as Blue */    }   }

CSS Hack for Chrome, Safari and other WebKit kernel browsers

Chrome, Safari, and other browsers with the WebKit kernel 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 { C9/>color:blue; /* WebKit Kernel browser displays blue */    }   }

Use the CSS Hack with caution

Many articles on the web related to CSS hack say that adding characters between CSS property values and semicolons can implement CSS hack for IE 8 or IE 9 (some say, only support IE8).

The example on the Web is this:

. css-hack {       color:red;/* Other browsers display red *    /color:blue\0;/* IE8, IE9 show Blue */    +color:green;/* IE7 show Green */
  _color:brown; /* IE6 Show Brown */}

The actual test found that there are 3 points to note about the above CSS hack that are implemented using the character.

1, IE10 also be able to identify the added character of the CSS property values (I do not have IE 11, do not know if IE 11 can also be recognized).

2, the attribute value and can not have a space between, there is a space (for example: blue), in IE 8 is invalid, only for IE 9/ie 10 valid.

3. What if we just want to do CSS hack for IE 8/ie 9? At this time, we remove the next two lines of code related to IE6, IE7.

. css-hack {       color:red;/* Other browsers display red *    /color:blue\0;/* IE8, IE9 show Blue */}

This time, in IE 6, IE 7 Browser, you will find that you see not red, but black (that is, the default font color)!

This is because the General browser idea is to filter out the invalid CSS property values, and then from the correct property settings based on the priority to get the most subsequent CSS property values. and IE 6/7 Browser is not first filter out invalid attribute value, but first based on priority, get the most back CSS property value, and then to determine whether the property value, invalid is ignored. Therefore, if according to the net, only use the 8+ to realize the CSS Hack of IE, it will damage the display effect in IE6/7. You must restore the style of the IE6/7 by using the additional CSS property settings.

Because, we can not simply conclude that the use of the "/" will be implemented on IE 8, ie 9 or even IE 10 + CSS Hack.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!