The definition and usage of CSS hack

Css Hack the definition and usage of

1. What is CSS hack

because of different browsers, such as Internet Explorer 6,internet Explorer 7,mozilla Firefox , and so on, the parsing of CSS is not the same, so the resulting page effect is not the same, Can't get the page effect we need. At this time we need to write different CSS for different browsers , so that it can becompatible with different browsers, can be in different browsers can also get the desired page effect. the process of writing different CSS code for different browsers is called CSS hack!

2, CSS hack solve the problem

problem ①css hack is used to solve the problem that some CSS properties appear differently in different browsers, such as when block-level elements float and the margin property is twice times wider than the distance displayed in the other browsers in IE6. That is to say margin-left:20px; in non- The distance displayed in the IE6 Browser is the set value of 20px, while the actual display distance in the IE6 browser is 40px; so to think that the value of Margin-left in all browsers is 20px width, the wording should be : display:inline To solve the problem of IE6 bilateral distance.

. kw{margin-left:20px;

_margin-left:20px;

}

problem ②ie6 Browser does not support maximum minimum width height (min/max-height)

Workaround: to be IE6 set hack individually, i.e. _height: Minimum height value, _width: Minimum width value (for IE6, when the actual width height exceeds the defined width height, The element will automatically adjust the width height). For maximum height and maximum width, there is no need to set compatibility .

of Common hack as follows :

Hack	Example	IE6	IE7	IE8
*	*color	Yes	Yes	No
+	+color	Yes	Yes	No
-	-color	Yes	No	No
_	_color	Yes	No	No
#	#color	Yes	Yes	No
/	Color\0	No	No	Yes
\9	Color\9	Yes	Yes	Yes
!important	Color:blue!important; Color:green;	No	Yes	Yes

IE6 support for!important in redefinition , such as:
　　. yanse {color:red!important;}
　　. yanse {color: #000;}
you will find that when the style class= "Yanse" is defined, the font is displayed in red under IE6 (red).
　　However,!important in the same definition is not supported . For example:
　　. yanse {color:red!important;

Color: #000

}
at this point in IE6 is not supported, you will find that when the style class= "Yanse" is defined, the font is displayed in black (#000).

3. in turn, we can use CSS hack to customize different CSS effects for different versions of browsers.

take color as an example to to be FF, IE8, IE7, IE6 write the unused effects :
. csshack{

color:red; /*firefox and other browsers are shown in red */

color:blue\9; /*IE8 recognizable overlay The above rule is shown in blue */

*color:green!important;

/*ie7 recognizable overlay The above rules are shown in green */
*color: #000;/*_color: #000; * *

/*ie6 recognizable overlay above rule shown as Black */
}
here the "\9" can distinguish all IE and Firefox.
"*" IE6, IE7 can be identified. IE8, Firefox cannot.
"_" IE6 can Identify "_", IE7, IE8, Firefox cannot.
IE7, IE8 can be identified!important.
so , can completely distinguish open IE6, IE7, IE8, Firefox.

CSS hack Writing order, is generally applicable to a wide range of highly recognized CSS defined in front . So the above example is written in the following order: Firefox is written inthe first, the IE6 to be used in the last side of the cover, Other browsers are written in the middle.

The definition and usage of CSS hack