Shulou(Shulou.com)06/02 Report--

This article shows you how CSS Hack technology solves the problem of multi-browser compatibility. The content is concise and easy to understand, and it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Describe to you how to use CSS Hack techniques to solve the multi-browser compatibility problem of DIV+CSS layout, and the process of writing different CSS code for different browsers is called CSS Hack.

Summary of CSS Hack skills

Introduction to CSS Hack

When we use DIV+CSS to make web pages, because different browsers, such as InternetExplorer6,InternetExplorer7,MozillaFirefox, have different support for CSS and different parsing results, the generated page effect is different, and we can not get the page effect we need. At this time, we need to write different CSS for different browsers, so that it can be compatible with different browsers at the same time, and we can get the page effect we want in different browsers. The process of writing different CSS code for different browsers is called CSS Hack.

To show you whether these CSS Hack are working properly, I create six new P tags and give each P tag a unique id. This will show you how CSS Hack works.

I'm from Opera7.2-9.5.

I am the magical Safari.

I'm from Firefox.

I am Firefox1-2, senior of FF.

I'm IE7.

I am the remnant IE6.

Then I let these P tags not show by default.

Bodyp {display:none;}

Use IE CSS conditional comments to distinguish IE browsers

The easiest way to distinguish IE browsers, of course, is to use their conditional comments. Microsoft has created a powerful syntax for us to implement this function. I don't want to elaborate on the IE condition notes. I think you can find tens of thousands of search terms in the search engine. I just need these two here:

Use the CSS parser Hacks to distinguish between IE

Although IE conditional annotations are simple and easy to use, if you want to put all the CSS in one file, you have to use other methods. Note that the IE7Hack here will only work for IE7, because IE6 doesn't know the > selector at all. You should also note that the > selector is also invalid for other browsers.

/ * IE7*/ html > body#ie7 {* display:block;} / * IE6*/ body#ie6 {_ display:block;}

CSS Hack distinguishes Firefox

* use body:empty to distinguish between Firefox1 and 2. The second hack uses the proprietary extension of all Firefox browsers-moz. -moz is only valid for Firefox, so you don't have to worry about the impact of other browsers when using this Hack.

/ * Firefox1-2 display:block; / body:empty#firefox12 {display:block;} / * Firefox*/ @-moz-documenturl-prefix () {# firefox {display:block;}}

CSS Hack distinguishes Safari

Safari's CSS Hack looks a lot like Firefox's hack, using webkit, a proprietary extension of the Safari browser, and is only valid for Safari browsers.

/ * Safari*/ @ mediascreenand (- webkit-min-device-pixel-ratio:0) {# safari {display:block;}}

CSS Hack distinguishes Opera

/ * Opera*/ @ mediaalland (- webkit-min-device-pixel-ratio:10000), notalland (- webkit-min-device-pixel-ratio:0) {head~body#opera {display:block;}}

Then, all put together to form the complete code:

CSSBrowserHacks bodyp {display:none;} / * Opera*/ html:first-child#opera {display:block;} / * IE7*/ html > body#ie7 {* display:block;} / * IE6*/ body#ie6 {_ display:block;} / * Firefox1-2percent / body:empty#firefox12 {display:block;} / * Firefox*/ @-moz-documenturl-prefix () {# firefox {display:block }} / * Safari*/ @ mediascreenand (- webkit-min-device-pixel-ratio:0) {# safari {display:block;}} / * Opera*/ @ mediaalland (- webkit-min-device-pixel-ratio:10000), notalland (- webkit-min-device-pixel-ratio:0) {head~body#opera {display:block;}} I come from Opera7.2-9.5

I am the magical Safari.

I'm from Firefox.

I am Firefox1-2, senior of FF.

I'm lost IE7.

I am the remnant IE6.

CSS Hack is good and easily compatible with all browsers, but it can't be verified by W3C, so you have to weigh whether it is necessary to use it.

The above is how CSS Hack technology solves the problem of multi-browser compatibility. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.