Use different CSS styles in different browsers to solve browser compatibility issues

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;

Method one: In the same CSS style sheet, use!important to define different values to accommodate Firefox and IE, for example:

padding:20px!important; /*for firefox*/
padding:10px; /*for ie*/
(Note that IE6 here is unrecognized!important, but it will recognize padding:20px, so add padding:10px to cover padding:20px)

This method is useful for modifying a small amount of code.

Example one:

Css
#box {
Color:red!important;
Color:blue;
}

Html
<div id= "box" > in different browsers, the color of this line of words should be different! </div>

This example is in the IE6 environment, this line of words is blue, in IE7 and Firefox, Red.
This is because IE6 do not recognize important (that is, do not recognize!importmant but still recognize!important in front of color:red), and Color:blue put
In the back of the color:red (the following CSS definition overrides the previous color:red), so the word is blue under IE6, and under IE7 and Firefox
Important level priority, so color:red!important, and Color:blue, and the order is not related, in IE7 and Firefox red with
It doesn't matter who is blue first.

Method Two: Conditional comments (only valid for IE browser) first write their own CSS styles for different browsers, and then add the following code to the head to accommodate the different versions of the IE browser:

<!--[If ie]>
According to the conditional comment this is Internet explorer<br/>
<! [endif]-->

<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br/>
<! [endif]-->

<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br/>
<! [endif]-->

<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br/>
<! [endif]-->

<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br/>
<! [endif]-->

<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br/>
<! [endif]-->

<!--[IfGTEIE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br/>
<! [endif]-->

<!--[IfLTIE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br/>
<! [endif]-->

<!--[IfRT;IE 5.5]>
According to the conditional comment this is an Internet Explorer lower or equal to 5.5<br/>
<! [endif]-->

<!--[IfGTIE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br/>
<! [endif]-->

<!–[if!IE 6.0]> This content is visible in addition to the IE6.0 version <! [endif]–>

In addition: IE also supports a non-standard tag: Comment
<p>this is <comment>not</comment> Internet explorer.</p>
This is Internet Explorer.

IE automatically treats the contents of this tag as comments.




Method Three: JavaScript. Judging different browser types to invoke unused CSS

Followed by comments

<script. Language= "JavaScript" >
<!--
if (Window.navigator.userAgent.indexOf ("MSIE") >=1)
... {
If the browser is IE
Setactivestylesheet ("Ie.css");
}else ... {
if (Window.navigator.userAgent.indexOf ("Firefox") >=1)
... {
If your browser is Firefox
Setactivestylesheet ("Ff.css");
}else ... {
If the browser is a different
Setactivestylesheet ("An.css");
}
}

function Setactivestylesheet (title) ... {
document.getElementsByTagName ("link") [0].href= "/blog/css/" +title;
}
-
</SCRIPT>

The second method of Javascrip judgment

<script. Language=javascript>
<!--
if ((Navigator.appname = = "Microsoft Internet Explorer") && (parseint (navigator.appversion) >= 4))
{
document.write (' <link rel=stylesheet type= ' text/css ' href= ' ie.css ' > ')
}
else {document.write (' <link rel=stylesheet type= "text/css" href= "ns.css" > ')}
-
</script>

Method four: Set in CSS for a specific browser

height:20px; /*for all includes Firefox */
*height:25px; /*for IE7 & ie6*/
_height:20px; /*for ie6*/
*+height:20px/* IE7 */

In the CSS is a few words will make different browser display is not the same. We just have to set the incompatible sentence to a specific browser, it can also achieve the perfect compatibility

"/9" Example: "margin:0px auto/9;". Here the "/9" can be distinguished from all IE and Firefox.
"*" IE6, IE7 can be identified. IE8, Firefox cannot.
"_" IE6 can Identify "_", IE7, IE8, Firefox cannot.
*+ for IE7

Use different CSS styles in different browsers to solve browser compatibility issues