CSS hack browser compatibility

Source: Internet
Author: User

CSS hack has to be used in some projects. The jquery blog has also met. I want to write a 3D map for the second development. Code Compatibility. It is difficult to implement it in the short term. It is impossible to return to CSS hack.
In order to debug Nima's 3D map, we had to install ie9 and use ietest to take care of IE's family. Firefox Chrome safari Opera
Hack Sequence
Generally, Firefox is used as a platform. As long as the code is well written, there will not be much hack, and almost no problem exists in browsers other than IE, so you can ignore it temporarily. The sequence is as follows:
Firefox> IE6> IE7> others
Hack usage
There are two methods: Processing in different files and processing in the same file. In fact, the functions are the same, but the starting points are different.
1. Processing in the same file.
For example, the control id = "BG" must be blue in IE6, green in IE7, and red in Firefox.
# BG {
Background: red! Important;/* other browsers such as Firefox */
Background: Blue;/* IE6 */
}
* + Html # BG {
Background: Green! Important;/* IE7 */
}
IE6 does not recognize it! Important, do not recognize * + html. Therefore, IE6 can only be blue.
IE7 recognition! Important, also recognizes * + HTML, priority: (* + HTML +! Important)>! Important> + html. IE7 can be red, blue, and green, but Green has the highest priority.
Firefox and other browsers recognize it! Important .! Important is preferred. Firefox can be red or blue, but red is preferred.
The above priority symbols are all allowed by the css3 standard, and other browsers also have other hack methods, but so far I have not encountered Firefox normal, and other browsers other than IE are abnormal, so there is no sharing. as long as the code is standardized, we believe this situation should be rare (except JavaScript ).
2. process different files.
Why can the same file be processed and written in multiple files for different browsers? This is to fool W3C verification tool. In fact, only two files are required. One is for all browsers and the other is for Nima's ie service. write All W3C-compliant code to one file, and some code (such as cursor: hand;) that is required by IE and cannot be verified by W3C is put into another file, use the following method to import data.
<! -Place the style of all browsers->
<LINK rel = "stylesheet" href?”style.css "type =" text/CSS "/>
<! -Place only the items required by IE, but not the W3C code.->
<! -[If IE]>
<LINK rel = "stylesheet" href?”style_ie.css "type =" text/CSS "/>
<! [Endif]->
There are many CSS hack methods in the browser, such as @ import introduction,> filter, and so on, but the above is all I have used.
Page compatibility should not be limited to support for the past browsers (Forward compatibility), but also for future browser services (backward compatibility ). because of the rapid development of browsers and the update of the two ends in three days, Google Firefox is competing for the rise, it is really a sweat. So, we try our best to achieve the standard, we have to deal with the hack, and try to use a relatively simple method to solve.
Finally, let's fight against IE6. If our friends and customers around us use IE6, please upgrade it if you see it. Let's f u c k IE6, thanks!

Converting from jquery http://www.jqueryba.com/280.html

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.