Compatible side of CSS-----Hack

Compatible side of CSS-----hack technology Daquan Compatibility range: Ie:6.0+,firefox:2.0+,opera 10.0+,sarari 3.0+,chrome Reference: List of commonly used compatible tags for each tour:     Tag ie6ie7ie8ffoperasarari[*+><]√√x x x _√x x x x x \9√√√    x x x x√x√x x @media screen and (-webkit-min-device-pixel-ratio:0) {. bb {}} X x x x x√.bb, X:-moz-any-link, X:default x√x√ (ff3.5 and below) x x @-moz-document url-    Prefix () {. bb{}} x x X√x x @media all and (min-width:0px) {. bb {}} x x x√√√  * +html. bb {} x√x x x x Viewer core Trident Trident Trident Gecko Presto WebKit (above . BB can be changed to other style name note: Many of the information on the Internet often!important also as a means of hack, in fact, this is a misunderstanding.!important is often used by us to change the style, not to be compatible with hack. The cause of this misunderstanding is that IE6 in some cases do not actively identify!important, so often misused to identify IE6 hack. However, it is important to note that IE6 is not recognized in some cases (IE6, the same style attribute is defined in the same curly brace, where one plus important important tag is ignored, for example: {background:red!important; Background:green;} IE6 is explained under the background color green,Other browsers are interpreted as background color red; If the same style is defined in a different curly brace, one of the important important play a normal role, for example: Div{background:red!important} div{background: Green}, when all browsers are interpreted uniformly as the background color red. Example: Hack application scenario (i) applicable scope: ie:6.0,ie7.0,ie8.0 between the examples of compatibility: In this example, we used the progressive recognition method, from the overall part of the gradual exclusion. First, the use of the "\9" mark, the Internet Explorer is separated from all situations. Then, once again using "+" to separate IE8 and IE7, IE6, at this time, our IE8 has been independently identified. Instance code:. bb{height:32px;/* all Recognition */./*IE6, 7, 8 identification */+/*ie6, 7 identification */_/*ie6 recognition */}/* a div tag for display class bb */< div class = "BB" >
 Hack application Context (ii) Applicability: Ie:6.0,ie7.0,ie8.0,firefox between the examples of compatibility: It is easy to see that this is the situation (a) of the enhanced version, applicable to a wider environment. In fact, the situation (a) has been done to distinguish Firefox and IE Explorer, now we have to do is to make Firefox from other browsers to recognize again. Look at the code carefully, you will find that the fact that the viewer recognition is very simple. How does Firefox identify? Yes, the pseudo-class support is not widespread in IE, so pseudo-class is a good way. (. Yourclass,x:-moz-any-link, X:default) Note that this distinction pseudo-class is often IE7 can also be recognized, so it is better to identify the IE7 alone, and this method is invalid for ff3.6, Firefox can be distinguished using @-moz-document Url-prefix () {} instance code:. bb{height:32px;/* all recognition *//*IE6, 7, 8 identification */+/*ie6, 7 identification */_/*ie6 identification */}.BB , X:-moz-any-link, X:default{}/*ie7 firefox3.5 and the following identification */@-moz-document Url-prefix () {. bb{}}/* only Firefox identification */* +html. bb{}/ * Only IE7 recognition *//* a div tag for display class bb */< div class = "BB" >
 Hack application context (c) Scope: Ie:6.0,ie7.0,ie8.0,firefox,safari (Chrome) Compatibility Example Description: We will now re-enforce our CSS so that it can recognize the Safari (Chrome) browser. This is recognized based on their kernel WebKit, using the @media screen and (-webkit-min-device-pixel-ratio:0) instance code:. bb{height:32px;/* all recognition *//*IE6, 7, 8 Identification */+/*ie6, 7 recognition */_/*ie6 recognition */} @media screen and (-webkit-min-device-pixel-ratio:0) {. Bb{/*safari (Chrome) effective */.bb, x:-  Moz-any-link, X:default{}/*ie7 firefox3.5 and the following identification */@-moz-document Url-prefix () {. bb{}}/* only Firefox identification */* +html. bb{}/* only IE7 Identify *//* a div tag for display class bb */< div class = "BB" >
 Hack application situation (iv) applicable scope: Ie:6.0+,firefox:2.0+,opera 10.0+,sarari 3.0+,chrome Full Compatibility Example Description: The specific code of the instance is listed in the following instance code, the effect is so that the top part of the page, You can detect this effect from different viewers. This time we basically have all the mainstream of the tour device is compatible, we look at the code. Opera's recognition is partly attributed to the "IE8" mark, which is only recognized by the two, and the special markings often create our broader hack approach. The following example of the code is more complete, you can choose to reference. Instance code:
 
  
 
 
 

 
  
  
 
   
 
    
IE6
 
    
 
    
IE7
 
    
 
    
IE8
 
    
 
    
Firefox
 
    
 
    
Opera
 
    
 
    
Safari (Chrome)
 
    
 
   
 
   
 
    
IE6
 
    
 
    
IE7
 
    
 
    
IE8
 
    
 
    
Firefox
 
    
 
    
Opera
 
    
 
    
Safari (Chrome)
 
    
 
   
 
  

 
 
Opera's distinguishing color is dark green, opera tour is very fashionable. the color of Firefox is light green, and Firefox is a powerful viewer. Safari and chrome colors are golden, and Safari and chrome use the WebKit kernel
 
 
 

