CSS compatible solution hack

What is CSS hack

Due to different browsers, and even different versions of the same browser, the parsing of CSS is not the same, resulting in inconsistent page results, written for different browsers CSS code is called CSS hack.

Commonly used CSS hack there are three ways, CSS internal hack, selector hack, HTML header reference, the first of the most commonly used.

CSS internal hack

That's what the real CSS says.

<! DOCTYPE html>
This code is useful for all the browsers that are currently used, and the result should look like this.
But in CSS3, some of these things are common.
/*mozilla Kernel Browser: firefox3.5+*/  -moz-transform:rotate | scale | skew | translate;/*webkit kernel browser: Safari and Chrome*/
   -webkit-transform:rotate | Scale | Skew | Translate; /*opera*/  -o-transform:rotate | scale | skew | translate/*ie9*/-ms-transform:rotate  | scale | skew | transla Te; /*W3C Standard */  transform:rotate | scale | skew | translate;
If there is no comment at first glance, it seems that the inverse of the day, such code is so! This code really works, CSS3 current standards are not unified, each browser has its own way of expression, and even some implementations, some are not implemented, in front of the prefix to indicate support for a particular browser, which is the basic principle of CSS internal hack, to the above simple, but the real CSS Hack far more than this, because there are undead IE6 and their various wonderful brother versions.
CSS internal hack syntax is such a selector{
*
The addition of a "*" in front of the property will only be valid for IE6, 7, and other versions of IE and modern browsers will ignore this directive (no special instructions, all hack in this article refer to the effect of the document that declares DOCTYPE)
-
There is a "-" in front of the property, only IE6 recognition, and some in the back hack
 
In this way, add "!important" after the value of the attribute is only IE6 not recognized, other versions of IE and modern browser can be recognized, as well as "+", "X", "\9" and so on, messy good, draw a table

 
 

  
  
 
   
 
    
 
    
IE6
 
    
IE7
 
    
IE8
 
    
IE9
 
    
IE10
 
    
Modern browsers
 
   
 
   
 
    
*
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
+
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
-
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
!important
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
\9
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
/
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
\9\0
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
  
 
 
That's a lot clearer. If you want to add a green background to the test div above when you visit IE, you can write this
If you want to IE6 red, IE7 Green, other yellow (of course no one is so boring) can write like this
Background-color:green;+background-color:green;_background-color:green;
Selector hack
Selector Hanck is mainly for IE browser, in fact, not how often, grammar is such:
 
 

  
  
 
   
 
    
 
    
IE6
 
    
IE7
 
    
IE8
 
    
IE9
 
    
IE10
 
    
Modern browsers
 
   
 
   
 
    
*html
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
*+html
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
: Root
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
  
 
 
The hack for IE9 can be written like this.
: Root. test{    Background-color:green;}
HTML Header Reference
HTML header reference is very special, similar to the program statement, can only be used in the HTML file, but not in the CSS file, and only in the IE browser can be executed, the code in non-IE browsing is not a single implementation of the definition of the condition, but as a comment blind.
<!– Default first call CSS.CSS style sheet –><link rel= "stylesheet" type= "Text/css" href= "Css.css"/><!–[if IE 7]><!– If the IE version is 7, call IE7.CSS style sheet –><link rel= "stylesheet" type= "Text/css" href= "Ie7.css"/><! [Endif]–><!–[if LTE IE 6]><!– if IE browser version is less than or equal to 6, call Ie.css style sheet –><link rel= "stylesheet" type= "Text/css" href= "Ie.css"/><! [endif]–>
LTE: is less than or equal to the shorthand, that is, smaller than or equal to the meaning.
LT: is less than shorthand, that is, smaller than the meaning.
GTE: is greater than or equal to the shorthand, that is, greater than or equal to the meaning.
GT: is greater than shorthand, that is, the meaning of greater than.
! : Is not equal to the meaning, and JavaScript is not equal to the same judgment.
Writing order
Look, look, so many posture, then an effect, a good variety of writing, what order to ensure that all browsers have the desired effect? Because the CSS as long as the same level, duplicate property settings, after the appearance will overwrite the previous occurrence, so in the writing of the general recognition ability to write in front, see an example
_background-color:red;background-color:green;
If you want div to be red on IE6, the other is green, can you write it on the top? Try to find all the browser is green, because in IE6 parsing, the first sentence can be recognized, the background is set to red, but the second sentence all browsers are recognized, IE6 is no exception, the background color is set to green, so you have to write in reverse
background-color:green;_background-color:red;
Summed up the law is: first general, and then special. Interested students can try to try the following CSS to see if the effect you think is the same
/* All browsers */background-color:red\9;/* all ie*/background-color:yellow\0; /* Ie8+*/+background-color:pink; /*+ ie7*/

　　　　
This article goes from the Internet
CSS compatible solution hack