CSS controls IE7, IE6, Firefox and other browsers)

We develop different CSS files for different browsers, one for IE, one for Firefox, and one for all other types of browsing. In this way, we don't need to think too much during the design. As long as I can display this CSS normally in FF, I don't care how it works in IE, similarly, the normal CSS in IE does not care how messy it will be in ff.

First, weCodeAdd the <link> </link> label to the tag. First, write the location of the default CSS file to be used. We recommend that you put the CSS file used in IE, for example, <link href = ".. /CSS/ie.css "rel =" stylesheet "type =" text/CSS ">. This prevents the browser type from being determined when the other browser does not enable Javascript, it can also be displayed normally with IE used by more than 90% people.

Place the following JavaScript code in the head.

<Script Language="Javascript">
<! --
If(Window. Navigator. useragent. indexof ("MSIE")> =1 )
{
//If the browser is IE, call ../CSS/ie.css
Setactivestylesheet ("Ie.css" );
} Else {
If(Window. Navigator. useragent. indexof ("Firefox")> =1 )
{
//If the browser is Firefox, call ../CSS/firefox.css
Setactivestylesheet ("Firefox.css" );
} Else {
//If the browser is other, call ../CSS/other.css
Setactivestylesheet ("Other.css" );
}
}

FunctionSetactivestylesheet (title) {
Document. getelementsbytagname ("Link")[0]. Href="../CSS/"+Title; // Document. getelementsbytagname ("Link") [0]. href = "/blog/CSS/" + title; 0 in this row refers to the first tag named <link>, changed to 1, the second tag named <link>. Href = "" indicates the path where the CSS file is stored, and title indicates the file name of the CSS file.
}
//-->
</Script>

Window. navigator. useragent. indexof is followed by the browser type. If it is opera, you can add an if clause to judge and write it using JavaScript conditions. I will not talk about it here.

Let's take a look at the position of your CSS and see if different browsers call different CSS files. Great!

Method 2:

Different browsers, such as Internet Explorer 6, Internet Explorer 7, and Mozilla Firefox, have different understandings of CSS parsing, which leads to different page effects, we cannot get the page effect we need. At this time, we need to write different CSS for different browsers so that they can be compatible with different browsers at the same time, so that we can get the desired page effect in different browsers. Solution Because different browsers have different support for CSS and parse results, they also have a relationship with the priority of CSS. We can write different CSS for different browsers based on this. For example, IE6 can recognize underline _ and star number *, and IE7 can recognize asterisks *. When underline _ cannot be recognized, neither Firefox can recognize it. And so on. The writing order is generally to write the CSS of a browser with strong recognition ability behind. The following describes how to write more details. For example, to distinguish IE6 from Firefox, you can write as follows: <Style> Div { Background: green;/* For Firefox */ * Background: red;/* For IE6 */ } </Style> <Div> I saw red in IE6 and green in Firefox. </Div> <Style> Div {Background: green;/* For Firefox */* Background: red; /* For IE6 */} </style> <div> I saw red in IE6 and green in Firefox. </Div> Explanations: In Firefox, the above CSS does not recognize the stuff with an asterisk *, so it is filtered out and ignored. The parsed result is: div {Background: Green}, so the background of this div is green. In IE6, both background can be identified. The parsed result is: div {Background: green; Background: red;}, so according to the priority level, the red at the end has a high priority, so of course the background color of this div is red. Differentiate IE6, IE7, and Firefox with the following CSS hack Syntax: Difference between IE6 and FF: Background: orange; * Background: blue; Difference between IE6 and IE7: Background: Green! Important; Background: blue; Difference between IE7 and FF: Background: orange; * Background: green; Difference ff, IE7, IE6: Background: orange; * Background: Green! Important; * Background: blue; Note: Both IE and standard browsers (such as ff) cannot recognize *; IE6 can recognize *, but cannot recognize it! Important, IE7 can recognize * and can also recognize! Important; FF cannot recognize *, but can recognize it! Important; IE6 IE7 FF * √ * ! Important × √ Add another underscore "_", IE6 supports underlines, while IE7 and Firefox do not. So you can also distinguish IE6, IE7, and Firefox. : Background: orange; * Background: green; _ Background: blue; Note: No matter what method, the order of writing is Firefox's preface, IE7's writing in the middle, and IE6's writing at the end. Appendix: Table of compatibility with various CSS browsers