1. What is CSS hack?
CSS hack is by adding some special symbols in the CSS style, so that different browsers recognize different symbols (what kind of browser recognizes what symbols are standard, CSS hack lets you remember this standard) to achieve the purpose of applying different CSS styles, such as. kwstu{ width:300px;_width:200px;}, the General browser will first give the element to use width:300px, the style, followed by a _width:200px, because the underscore _width only IE6 can be recognized, So this style in IE6 actually set the width of the object is 200px, the back of the previous to the cover, and other browsers do not recognize _width does not perform _width:200px, this sentence style, so in other browsers set the width of the object is 300px;
The following is a quote from the definition of Baidu Library
To put it simply, CSS hack refers to the processing of Web content errors (such as what we often say are misplaced) between the various versions and the browser of each brand, after the CSS is interpreted. Because each browser's kernel is different, so will cause some error like JS, a JS Web effect, in Microsoft IE6, IE7, IE8 browser has effect, but may be in Firefox (Mozilla Firefox) Google browser invalid, so called JS hack, So we have a CSS for them to solve the different browser to the CSS interpretation of the difference between different browsers make different CSS style settings to solve these problems called CSS Hack.
Note: We usually mainly consider the browser has IE6, IE7, IE8, Google Chrome, Firefox (Mozilla Firefox) can, as for our popular, QQ's TT browser is the system loaded with your computer with the browser of the kernel, Therefore, only compatible with the above browsers can be compatible with Tt\ browser.
2, CSS hack solve the problem
CSS hack is used to solve the problem that some CSS properties are displayed differently in different browsers, such as the margin property displayed in IE6 is twice times wider than the distance shown in other browsers, that is, margin-left:20px; The actual display distance from the left object in IE6 is 40px, and the distance from the left object displayed in non-IE6 is the set value 20px; So the style that you want to set the distance of an object from the left side of the object is 20px width in all browsers:. kwstu{ margin-left:20px;_margin-left:20px;}.
3, the browser recognition character standard correspondence table
There are several things you can analyze from the following:
1. Most special characters IE browser support, other mainstream browser Firefox,chrome,opera,safari is not supported (except opera can be recognized).
2.\9: All IE browsers support
3._ and-: IE6 support only
4.*: IE6, E7 support
5.\0:IE8, IE9 support, opera part support
6.\9\0:IE8 partial support, IE9 support
7.\0\9:IE8, IE9 support
4, various CSS hack situation introduction1.
differentiate between IE and non-IE browsers#tip {
background:blue;/* non-IE background blue because all browsers can explain */
Background:red\9;/*ie6, IE7, IE8, IE9 background red because \9 can be recognized in IE6.7.8.9, cover above style IE10 with 11 should not be recognized, IE11 test OK */
}
2. Distinguishing Ie6,ie7,ie8,ff
"Distinguishing symbols": "\9", "*", "_"
#tip {
Background:blue;/*firefox background Blue all browsers support */
BACKGROUND:RED\9;/*IE8 background Red IE6, 7, 8, 9 support overlay above style */
*background:black;/*ie7 background Black IE6, 7 support again overlay the above style */
_background:orange;/*ie6 background Turn orange tight IE6 support again overlay the above style */
} "description": Because the IE series browser readable "\9", and IE6 and IE7 readable "*" (m font size), in addition IE6 can be identified "_" (bottom line), so you can write down in sequence, it will let the browser read correctly to understand the CSS syntax, So you can effectively distinguish between the various versions of IE and non-IE browser (such as Firefox, Opera, Googlechrome, Safari, etc.).
3. Distinguish between IE6, IE7, and Firefox (Method 1)
"Distinguishing Symbols": "*", "_"
#tip {
Background:blue;/*firefox background turns blue */
*BACKGROUND:BLACK;/*IE7 background turns black */
_BACKGROUND:ORANGE;/*IE6 Background Turn Orange */
} "description": IE7 and IE6 readable "*" (m size), IE6 can read "_" (bottom line), but IE7 cannot read "_", as for Firefox (non-IE browser) is completely unable to identify "*" and "_", so you can differentiate between IE6, IE7, Firefox
4. Distinguish between IE6, IE7, and Firefox (Method 2)
"Distinguishing Symbols": "*", "!important"
#tip {
Background:blue;/*firefox background turns blue */
*BACKGROUND:GREEN!IMPORTANT;/*IE7 Background Green */
*BACKGROUND:ORANGE;/*IE6 Background Turn Orange */
} "description": IE7 can identify "*" and "!important", but IE6 can only identify "*", but cannot recognize "!important", as for Firefox can read "!important" but not recognize "*" Therefore, this difference can be used to effectively separate IE6, IE7 and Firefox.
5. Distinguish between IE7 and Firefox
"Distinguishing Symbols": "*", "!important"
#tip {
Background:blue;/*firefox background turns blue */
*BACKGROUND:GREEN!IMPORTANT;/*IE7 Background Green */
}
"description": Because Firefox can recognize "!important" but can't recognize "*", and IE7 can understand "*", "!important" at the same time, so two identification symbols can be isolated IE7 and Firefox.
6. Distinguishing between IE6 and IE7 (Method 1)
"Distinguishing Symbols": "*", "_"
#tip {
*BACKGROUND:BLACK;/*IE7 background turns black */
_BACKGROUND:ORANGE;/*IE6 Background Turn Orange */
"description": IE7 and IE6 can be identified "*" (m), but IE6 can identify "_" (bottom line), IE7 is not recognized, through IE7 can not read the characteristics of "_" will be able to easily relax the difference between IE6 and IE7.
7. Distinguishing between IE6 and IE7 (Method 2)
"Distinguishing symbol": "!important"
#tip {
BACKGROUND:BLACK!IMPORTANT;/*IE7 background turns black */
BACKGROUND:ORANGE;/*IE6 Background Turn Orange */
}
“_”
#tip {
Background:black;/*firefox background turns black */
_BACKGROUND:ORANGE;/*IE6 Background Turn Orange */
} "description": Because IE6 can identify the "_" (bottom line), but Firefox does not, so you can use this difference to separate Firefox and IE6, effectively achieve csshack.
5. hack summary under IE browserelement{
Color: #666 \9;//IE8 IE9
* Color: #999;//ie7
_color: #EBEBEB;//ie6
}
It can be seen that using character recognition cannot differentiate between IE8 and IE9, we can differentiate from pseudo-class recognition
element{
Color: #666 \9;//ie8
* Color: #999;//ie7
_color: #EBEBEB;//ie6
}
: Root element{color: #666 \9;} IE9
"description": ": Root" pseudo-class IE series only IE9 support, other mainstream browsers are supported, use this to differentiate between IE8 and IE9. In addition, in view of opera partial support, full support: root, so do not use.
6, other mainstream browser CSS hack summary
1.Firefox Browser:Mozilla private properties
@-moz-document Url-prefix () {. Element{color: #f1f1f1;}}//firefox
2.
WebKit and Opera:
Creen and (-webkit-min-device-pixel-ratio:0)
{
. Element{color: #444;}
}
Opera
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
. Element{color: #336699;}
}
7, compatible with the major mainstream browser (the latest version) CSS hack summarized as follows (most complete):
. element{
Color: #000; /*W3C Standard */
[; color: #f00;]; /*webkit (Chrome and Safari) */
Color: #666 \9; /*ie8*/
*color: #999; /*ie7*/
_color: #333; /*ie6*/
}
: Root. Element{color: #0f0 \9;} /*ie9*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (
-webkit-min-device-pixel-ratio:0) {. Element{color: #336699;}} /*opera*/
@-moz-document Url-prefix () {. Element{color: #f1f1f1;}}/*firefox*/ 8, the proposal: the actual development first if not very clear can write the layout code, write a stage with the browser Test tool (common tool recommended ietest) test a version of the browser layout effect, if there is a problem for the browser to debug separately.
CSS hack Daquan & Detailed (what is CSS hack)
