CSS hack technical details, support IE 6-11, Chrome, FireFox, Safari, Opera

Transferred from: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm

In the current network era, a variety of web pages to show us a rich and colorful web world, and the browser is our view of the Network World window.

In the past, browsers mainly have IE and Netscape two, and now, a variety of powerful browser endless. For example: The world-famous browser has chrome, FireFox, Safari, Opera, the common "domestic" browser has roaming, QQ, 360, Sogou, UC, the window of the globe.

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;/* final background color shown as blue */ 
 } 
  </style> 
 <div class = "css-hack" >codeplayer </DIV>               

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 attribute name with an underscore _, ie 6 can still recognize the attribute, and only IE 6 can be recognized. Therefore, we can use this feature to allow IE 6 to achieve some specific effects.

. CSS-{
Background-color: red;  / * appears in red on other browsers */
_background-color: blue;  / * Shown as blue on IE 6 */
}

Furthermore, because IE 6 does not support max-width attributes, IE6 's CSS property values support expression expressions. Therefore, we can implement max-width the properties effect for IE 60 percent.

.As1-Hack{
Background-Color:Red;
Max-Width: 200px;
_width:Expression( function(Me){ VarMaxWidth= 200;Me.style.=  (me. Offsetwidth <= MaxWidth ? Me offsetwidth : Maxwidth)  +  "px" ; Span class= "pun" > (this ); /* _ only IE6 can be recognized, for performance reasons, the expression here will only be performed 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.

IE browser css Hack all IE browser CSS Hack

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

. CSS-{
Background-color: red;  / * shown in red on other browsers */
Background-color:\9;  / * show blue on all IE browsers */
}

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-{
Background-color: red;  / * shown in red on other browsers */
_background-color: blue;  / * Only the IE 6 browser is shown in blue */
}

CSS Hack for IE 7

The

IE6, IE7 are able to identify CSS property names with the + , * , or # prefixes, but IE 7 does not support _ prefixes, and IE6 support. Therefore, we can first write a * property , + properties or #属性 let IE6, IE7 can recognize, and then write a _ property , only let IE6 recognize, Restores the property value back so that the former is only valid for IE 7.

.css-hack { 
     Color: red; /* displayed on other browsers as red */ 
     +color: Blue;/* only ie 6, IE 7 browser displayed as blue */ 
     _color: Red;/* let IE 6 revert to the previously set color */ 
 }       

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 is not supported !important , so you can *属性: 值!important; implement the form of IE 7 CSS Hack.

In fact, this is not possible, because IE 6 is not unsupported !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.

!importantthe use of CSS Hack to implement IE 7, must be in the same style selector, but also need to be added in the following _属性 to restore the settings of IE 6 (this way also troublesome, the above method also write less !important ).

. Css-hack { 
     Color: Red;/* other browsers appear as red */ 
     *color< Span class= "pun" >: blue !; /* 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 adding *+html  before the selector, , making the current selector the successor selector for *+html , only IE 7 can recognize such a style selector ( Some older versions of the Opera browser are said to be recognizable, but these versions are already dead, regardless.

.-hack { 
     Color: Red;/* other browsers show Red */ 
 } 
  *+html .-hack { 
     Color: Blue;/* only ie 7 shows blue  */ 
 }       

IE 7 also supports adding a successor selector in front of the selector to *:first-child+html make *:first-child+html the current selector.

.css-hack { 
     Color: red; /* other browsers display red */ 
 } 
 *:< Span class= "PLN" >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 show Red */ 
 } 
 
  @media  \0screen { 
     . Css-hack { Color: Blue;} /* only ie 8 show 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-{
Color: red;  / * Other browsers show Red */
*color: blue;  /* IE 6, ie 7 shown in blue */
}

CSS Hackfirefox for FireFox, Chrome, Safari, opera css Hack

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

.Css-Hack{
Color: Red;/* other browsers show Red */ 
 } 
 
  @-moz-document url- Prefix ()  { 
     css-hack { 
         Color: Blue; /* only Firefox appears 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) .

.As1-Hack{
Color: Red; /* Other browsers show Red */
}

@mediaScreenand  (-webkit-min -device-pixel-ratio:0)   { 
     .css-hack { 
         Color: Blue; /* webkit kernel browser shows blue */ 
     } 
 Span class= "pun" >               

 

CSS hack technical details, support IE 6-11, Chrome, FireFox, Safari, Opera