Since the beginning of the Internet, the battles between browsers have not stopped. Of course, the most bitter of all is the Web page maker, in order to achieve the user experience and usability standards, have to be on multiple browsers for the unified effect on the rush. I really hope that one day FF can eminence, although now is the big world of IE. In particular, Microsoft's latest release of the IE7 browser, its CSS compatibility does give some Web developers to add a heavy new burden.
In order for the browsers to have the same display effect, we have to use CSS HACK. Of course, in this article we only talk about the most used IE6 and FF, as well as the future may become the mainstream of the IE7 CSS HACK, as for IE6 the following version has OP, sf in this first not explained in detail. Novice saw this piece of article will have some gains, and the masters are passing a bit on it, hehe!
Programme I
Let's take a look at the following CSS code:
Background-color:orange;
*background-color:blue!important;
*background-color:red;
<textarea id="runcode69735"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> scripting House-www.jb51.net css test</title> <style type=" Text/css ">. bgc{width:2 00px; height:200px; Background-color:orange; *background-color:blue!important; *background-color:red; } </style> </pead> <body> </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Let me briefly explain how each browser understands these three properties:
Under FF, the 2nd, 3 properties do not know, where the 2nd attribute if only add!important words ff must know, but because the front added a *, so do not know (IE7 know). So it reads the Background-color:orange;
In IE7, 1th, 2, 3 properties IE7 Although all know, but!important said is priority, so it reads *background-color:blue!important;
Under IE6, the 2nd attribute is not recognized, the 1th, 3 properties are recognized, but because the 3rd property overrides the 1th attribute, so IE6 finally read the *background-color:red.
Programme II
Let's take a look at the following CSS code:
Copy CodeThe code is as follows:
Background-color:orange;
*background-color:blue;
_background-color:red;
<textarea id="runcode61449"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>css test Script House-www.jb51.net</title> <style type=" Text/css ">. bgc{width:2 00px; height:200px; Background-color:orange; *background-color:blue; _background-color:red; } </style> </pead> <body> </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Let me briefly explain how each browser understands these three properties:
Under FF, the 2nd, 3 properties ff do not know, so it reads Background-color:orange;
Under IE7, the 3rd attribute IE7 does not know, so it reads the 1th, 2 properties, and because the 2nd attribute overrides the 1th attribute, so IE7 finally reads the 2nd attribute *background-color:blue;
Under IE6, these 3 properties IE6 are known, so 3 properties can be read, and because the 3rd attribute overrides the first 2 properties, IE6 finally reads _background-color:red.
One of the reading properties of IE must know, this is very important for beginners to use CSS hack, the browser read property is from top to bottom, that is, the same property settings last read is displayed on the browser. In addition, in the scheme of two kinds of "_" This is only IE6 know, it can be seen that the feeling of big stomach king. In addition to!important, it breaks the reading habit from top to bottom, using a priority display. In the above two programs can be seen in addition to the formal CSS writing and!important other than the other do not know, the standard is unified.
Here is not encouraged to encourage the use of CSS HACK, just don't look at other people write CSS code in the HACK do not know what it means. After all, using CSS hack to solve the compatibility between browsers is not a long-term approach, if the new version of the browser may be the original CSS hack you write how, IE7 is a good example. Try to reach 0 using CSS hack or less use, because a good layout structure can be a good solution to these problems, such a site is also a lot of.
