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

This article mainly introduces "how CSS hack distinguishes different browsers". In daily operation, I believe many people have doubts about how CSS hack distinguishes different browsers. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how CSS hack distinguishes different browsers"! Next, please follow the editor to study!

When we develop DIV+CSS pages, we often encounter some differences among major browsers, such as Microsoft IE6, Microsoft IE7, Microsoft IE8, Firefox and Google browser, such as width, height and so on.

The older version of IE6 browser has more users.

IE7 is newer and closer to the standard browser.

IE8 is a Microsoft standard browser, but it is different from the browser.

Firefox (Mozilla, Firefox) and Google browser (chrome) are relatively standard IE browsers. Generally, we use this browser as the reference platform for development. At the same time, IE8 is relatively close to the interpretation of CSS by these two browsers. Generally, we can determine IE8 as long as it is compatible with Firefox and Google browser.

So in general, the way we distinguish between these browsers CSS hack becomes simple, we only need to consider IE6\ IE7\ Firefox (Firefox) these three browsers can be compatible with all browsers.

The specific differences are as follows:

Distinguish IE6 from FF:

Background:orange;*background:blue

Distinguish IE6 from IE7:

Background:green! important;background:blue

Distinguish IE7 from FF:

Background:orange; * background:green

Distinguish between FF,IE7,IE6:

Background:orange;*background:green! important;*background:blue

Note: IE can recognize *; standard browsers (such as FF) can not *

IE6 can recognize *, but not! important

IE7 can recognize *, can also recognize! important

FF does not recognize *, but it can! the following is the CSS hack table of each browser: important;

IE6

IE7

FF

*

√

√

×

! important

×

√

√

Undefined

Add another one, underscore "_"

IE6 supports underlining, while neither IE7 nor firefox supports underlining.

So you can also distinguish IE6,IE7,firefox: background:orange;*background:green;_background:blue this way.

Note: no matter what method it is, the writing order is firefox in front, IE7 in the middle, and IE6 at the end.

The above is to introduce the different browsers of CSS hack writing, let's briefly introduce these CSS hack usage:

Requirement description: if we set a class CSS property named exple, the CSS style frame is 1PX black border, the height is 100PX, and the width is 150PX under the width of 100PX in IE6 browser; 200PX under Firefox IE8 Google browser; (PX is the unit of length in pixels)

The CSS code is as follows:

.exple {border:1px solid # 000; height:100px;width:200px; * width:150px! important; * width200px;}

So as long as you set a div class in html (class= "exple"), so that this part in Firefox, IE8, Google browser will show the width of 200px height of 100px with 1px black border box; IE7 browser width of 150PX height of 100px with 1px black border box; in IE6 browser will show the length and width of 100px with 1px black edge of the square.

At this point, the study on "how CSS hack distinguishes different browsers" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.