How to make different browsers call different CSS styles

How to make different browsers call different CSS styles

Because of the degree of support for the standard, the same CSS style sheet is often rendered in different Web browsers. In the case of Microsoft Internet Explorer and Mozilla Firefox, the two browsers that currently have the highest market share, the former is significantly less supportive of standards than the latter. Web designers have had to spend a lot of time and effort tweaking the code to keep the Web page consistent in both-it's a very painful thing to do, and forgotten how happens. But it would be unwise to give up on either side, with the Arctic Ice blog, where visitors account for 49.57% of all visitors, and 46.78% for Firefox, giving up half of their visitors.

Therefore, it is most important to use simple methods to ensure consistency of Web page display.

The first method. In the same CSS style sheet, use !important to define different values to accommodate Firefox and IE, for example:

PLAIN TEXTCSS:

1. padding:20px!important;
2. padding:10px;

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

The second method. The conditional comment. (only valid for IE browser) This is also the current method used by the Arctic ice tribe. First write the respective CSS styles for different browsers, and then add the following code to the head to accommodate the different versions of the IE browser:

PLAIN texthtml:

2. According to the conditional comment this is Internet Explorer
   />
3. <! [endif]-->

Below is another website, the feeling content is good to copy down:

Because the browser version of the different, some elements of the CSS interpretation is not the same, the wit of course also encountered the same problem, but also collected some solutions, the wit before two for the browser version of different and choose different CSS code, interested friends find it yourself.
In fact, we can also use the conditional annotation method to achieve a similar purpose, what is conditional comments, wit is also briefly introduced here, is nothing more than a few if judgment, hehe, but these judgments are not executed in the script, but directly in the HTML code execution, the following to introduce how to use it. Reference:

<!--[if xxx]>
Here is the normal HTML code
<! [endif]-->
Here xxx is some specific things, in this list a few out, detailed introduction of their respective meanings:
<!--[if ie]>/if the browser is IE/
<!--[if IE 5]>/If the browser is a version of IE 5/
<!--[if IE 6]>/If the browser is a version of IE 6/
<!--[if IE 7]>/If the browser is a version of IE 7/

......
The above is a few commonly used to judge the version of IE browser syntax, the following to introduce a relatively less useful logic to determine the parameters:
There are several parameters: LTE,LT,GTE,GT and!
The respective detailed explanations are as follows: References:

LTE: is less than or equal to the shorthand, that is, smaller than or equal to the meaning.
LT: is less than shorthand, that is, smaller than the meaning.
GTE: is greater than or equal to the shorthand, that is, greater than or equal to the meaning.
GT: is greater than shorthand, that is, the meaning of greater than.

! : Is not equal to the meaning of JavaScript, not equal to the same judgment, ^0^
Also write a few examples: quote:

<!--[if GT ie 5.5]>/If IE version is greater than 5.5/
<!--[if LTE IE 6]>/if IE version is less than or equal to 6/
<!--[if! ie]>/If the browser is not IE/
......
See here believe that everyone has understood the use of conditional annotations, OK, let's give an example:
<!--default to call the CSS.CSS style sheet first--
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>
<!--[if! Ie]>
<!--non-IE downward 1.css style sheet--
<link rel= "stylesheet" type= "Text/css" href= "1.css"/>
<! [endif]-->
<!--[If Lt IE 6]>
<!--if IE browser version is less than 6, call 2.CSS style sheet--
<link rel= "stylesheet" type= "Text/css" href= "2.css"/>
<! [endif]-->

Detailed use of the method has been introduced, have to mention the point is:
Conditional comments are only supported by IE after Ie5.0/win, and are not valid for IE5 's previous browsers, but there should be few people still using the IE4 version. ^0^



Browser conditional annotation theory, using the following example to explain the problem
X Html
The following section of code is the effect reference for testing conditional comment statements under Microsoft's IE browser:

<!--[if ie]>
<! [endif]-->
<!--[if IE 5]>
<! [endif]-->
<!--[if IE 5.0]>
<! [endif]-->
<!--[if IE 5.5]>
<! [endif]-->
<!--[if IE 6]>
<! [endif]-->
<!--[if IE 7]>
<! [endif]-->

The following code is a conditional comment reference that runs in a non-IE browser:

<!--[if! ie]><!-->
<!--<! [endif]-->

Ultimately works in non-IE and special IE browsers
(or use LTE LT or GT GTE to judge, such as: quote:

<!--[If LTE IE 6]>
Information displayed under IE 6
<! [endif]-->
).
<!--[if IE 6]><!-->
or a non-ie browser <!--<! [endif]-->
from:cssplay.co.uk/menu/conditional.html "target=" _blank ">http://www.cssplay.co.uk/menu/conditional.html

The above mentioned conditional comments, that is, to determine the browser type, and then define what browser to display what content.
This dropmenu (drop-down menu) model comes from the cssplay, making it a result of repeated research and repeated testing by the author. I think that this model to practice the principle of conditional annotation.
Let's look at one of the simplest models.
Here is the xhtm reference:

<div class= "Menu" >
<ul>
<li><a class= "Drop" href= ". /menu/index.html ">demos
<!--[if IE 7]><!-->
</a>
<!--<! [endif]-->
<!--IE7 Display </a> label--
<table><tr><td>
<ul>
<li><a href= ". /menu/zero_dollars.html "title=" The Zero Dollar ads page ">zero dollars advertising page</a></li>
<li><a href= ". /menu/embed.html "title=" wrapping text around images ">wrapping text around images</a></li>
<li><a href= ". /menu/form.html "title=" Styling Forms ">styled form</a></li>
<li><a href= ". /menu/nodots.html "title=" removing Active/focus borders ">active focus</a></li>
<li><a class= "Drop" href= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click with no borders</li>
<li class= "Upone" ><a href= ". /menu/shadow_boxing.html "title=" Multi-position drop Shadow ">shadow boxing</a></li>
<li><a href= ". /menu/old_master.html "title=" Image map for detailed information ">image map for detailed information</a></ Li>
<li><a href= ". /menu/bodies.html "title=" background images ">fun with background images</a></li>
<li><a href= ". /menu/fade_scroll.html "title=" fade-out scrolling ">fade scrolling</a></li>
<li><a href= ". /menu/em_images.html "title=" em size images compared ">em image sizes Compared</a></li>
</ul>
</td></tr></table>
<!--[If LTE IE 6]>
</a>
<! [endif]-->
</li>
<!--IE6 Display </a> label--
</ul>
</div>

Css
<link rel= "stylesheet" media= "All" type= "Text/css" href= "Final_drop.css"/>
<!--[If LTE IE 6]>
<link rel= "stylesheet" media= "All" type= "Text/css" href= "Final_drop_ie.css"/>
<! [endif]-->
Adopt the double style, give IE and non-IE define the style separately, if IE time, add a final_drop_ie.css on final_drop.css basis
First look at how the non-ie CSS is defined
. menu UL Li ul {
Display:none;
}

. Menu ul Li:hover a {
Color: #fff;
Background: #bd8d5e;
}

. Menu UL Li:hover ul {
Display:block;
Position:absolute;
Top:3em;
margin-top:1px;
left:0;
width:150px;
}

In the non-IE, see the mouse slide when the LI contains the UL display, because these browsers support li:hover usage
The CSS under IE
. menu ul li a:hover {
Color: #fff;
Background: #bd8d5e;
}

. menu ul Li A:hover ul {
Display:block;
Position:absolute;
Top:3em;
left:0;
Background: #fff;
margin-top:0;
marg\in-top:1px;
}
Inherit the above final_drop.css style, no mouse time when Li contains UL does not display
Because
<!--[If LTE IE 6]>
</a>
<! [endif]-->

How to make different browsers call different CSS styles