Since the beginning of the Internet, the battle between browsers has not stopped. Of course, the most bitter is the Web page production staff, in order to achieve the user experience and usability standards, have to be in multiple browsers for the unified effect. I really hope that one day FF can eminence, although it is still the big world ie. In particular, Microsoft's latest release of the IE7 browser, its CSS compatibility does give some web makers added a heavy new burden.
In order for the browser to have the same display effect, we have to use CSS HACK. Of course in this article we only talk about the current usage of the highest IE6 and FF, and the future may become the mainstream of the IE7 CSS HACK, as for IE6 the following version has OP, sf in this first not detailed. The novice saw this piece of article will have some harvest, and the master of the 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;
<! 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> cloud-Habitat Community-www.jb51.net CSS test</title> <style type=" Text/css "> bgc{wid th:200px; height:200px; Background-color:orange; *background-color:blue!important; *background-color:red; } </style> </pead> <body> <div class= "BGC" ></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Let me briefly explain how each browser understands these three properties:
Under FF, 2nd, 3 attributes are not recognized, where the 2nd attribute if only add!important words ff must know, but because the front and added a *, so do not know (only IE7 know). So it reads the Background-color:orange;
Under the IE7, the 1th, 2, 3 attributes IE7 Although all know, but!important is a priority, so it reads *background-color:blue!important;
Under IE6, the 2nd attribute is not recognized, 1th, 3 attributes are recognized, but because the 3rd attribute overrides the 1th attribute, so IE6 the final read *background-color:red.
Programme II
Let's take a look at the following CSS code:
Copy Code code as follows:
Background-color:orange;
*background-color:blue;
_background-color:red;
<! 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 cloud-dwelling community-www.jb51.net</title> <style type=" Text/css "> bgc{ th:200px; height:200px; Background-color:orange; *background-color:blue; _background-color:red; } </style> </pead> <body> <div class= "BGC" ></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Let me briefly explain how each browser understands these three properties:
Under FF, the 2nd and 3 attribute FF are not recognized, so it reads Background-color:orange;
Under IE7, the 3rd attribute IE7 is not recognized, so it reads 1th, 2 attributes, and because the 2nd attribute overrides the 1th attribute, IE7 finally reads the 2nd attribute *background-color:blue;
Under IE6, these 3 properties are IE6, so all 3 properties can be read, and because the 3rd attribute overrides the first 2 properties, IE6 ultimately reads _background-color:red.
In which the read properties of IE must know, this is very important for beginners to use CSS hack, browser read properties from top to bottom, that is, the same property set the last read to the browser is displayed. In addition, in the program two kinds of "_" This is only IE6 only know, see its big stomach king feeling. In addition to!important, it breaks the read habit from top to bottom and uses the priority display. In the above two scenarios can be seen in the FF in addition to formal CSS writing and other than!important, the standard is unified.
Here is not to encourage you to use CSS HACK, just don't look at other people write CSS code in these HACK don't know what it means. After all, using CSS hack to solve the compatibility between browsers is not a long-term approach, if the emergence of a new version of the browser may be your original written CSS hack how, IE7 is a good example. Try to reach 0 using CSS hack or less use, because a good layout structure can be very good to solve these problems, so there are also a lot of sites.
