Common CSS hack methods compatible with various browsers
On underone's website, he complained about the hack.
Now I want to share some of my known hack methods for various browsers.
1. This is a common CSS hack method widely circulated on the Internet that is well compatible with mainstream browsers such as IE6, IE7, Firefox, and opera.
# Yourid/. yourclass {/* normal */} 2. * html # yourid/. yourclass {/* IE6 and below */}
* + Html # yourid/. yourclass {/* IE7 only */}
@ Media all and (min-width: 0px ){
# Yourid/. yourclass {/* opera */}
}
The principle is that Firefox considers it a CSS syntax error, so ignore it. However, different ie versions have different features and are not ignored. Therefore, hack can be implemented, and * + HTML can still be verified by W3C. Opera is a similar principle, but it looks like a crash. It should be noted that, if there is no problem in Firefox, opera is basically no problem, therefore, this hack is not very useful.
Note: * + HTML must ensure that the following statement is provided on the top of the HTML header for IE7 hack, "<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" http://www.w3.org/tr/html4/loose.dtd">"
Therefore, in my opinion, this is not a perfect solution.
2. The second one is commonly used. Suppose you want to set an element to use different background colors in different browsers.
# Yourid/. yourclass {2. Background: NONE/* normal */;
* Background: #300! Important/* IE7 only */;
* Background: #400/* IE6 and below */}
Note that the order of writing is Firefox's first, IE7's second, and IE6's last. In fact, IE6's * background can also be written as _ background, because only IE6 supports underline, and IE7 and Firefox do not support it.
3. Commonly Used condition comments, but I have never used them. I don't know why, but it is annoying.
1. <! -[If lte ie 6]>
2. <LINK rel = "stylesheet" type = "text/CSS" href?”ie_hacks.css "> </link>
3. <! [Endif]->
4. stylegala-no more CSS hacks
With this method-stylegala-no more CSS hacks, the server determines the user agent to give different CSS files.
Now I know the following:* HTML yourid {}In most cases, this method is not compatible with IE6 and IE7. Sometimes, I don't know how to make it, or even it doesn't work at all. I don't know where I got it.