Question about CSS in Internet Explorer

I have an idea that I imagine is possible to make.

In a CSS file I need to put:

height: 50px;

If the browser is Internet Explorer, and

height: 开发者_JAVA百科45px;

if the browser is Chrome or Firefox.

How can I do this?

A special tag can be use as below:

<style type="text/css" media="screen">
   .yourTag { weight: 45px; }
   /*Normal browsers*/
</style>

<!--[if IE]>
<style type="text/css" media="screen">
   /*IE*/
   .yourTag { weight: 50px; }
</style>
<![endif]-->

NB: IE understands element's weight with borders, when other browsers don't.

There are a number of ways to achieve this, as it is quite common to need to provide alternative stylesheets for IE compared with other browsers.

However, it's important to note that the version of IE is also critical -- different versions of IE may have different problems, so you should target your hacks accordingly. In particular, Microsoft have recently released IE9, which is significantly more compatible with other browsers than earlier versions; you will almost certainly not need your hack in IE9, so you should be careful to exclude it.

If you explicitly want to target IE - for example, you need to work around a particular IE bug - then the best approach is to use Conditional Comments. These are an IE-specific feature which allow to you to specify code that only runs in IE, and also to specify the version(s) of IE that it will run in.

Conditional Comments look like this:

<!--[if lt IE 9]><link rel="stylesheet" href="ie-specific-styles.css" /><![endif]-->

IE sees the special code; all other browsers treat it as a normal HTML comment and ignore it.

You can learn more about them here: http://www.quirksmode.org/css/condcom.html

I would point out that a lot of the problems with box size in IE are caused by not using a valid Doctype. If your HTML code is causing the browser to drop into quirks mode then you will get issues exactly like that, but the correct solution is not to hack your styles until it works; the correct solution is to fix the HTML so that the browser doesn't go into quirks mode. This should get the box model to work correctly, and a lot of the odd layout issues will disappear.

Without specifying which version of IE you're talking about it's hard to say. You could use a CSS hack, but conditional comments are generally better because they are more future-proof. Conditional comments are used like so:

<!--[if IE]
<link type="text/css" rel="stylesheet" href="ie-styles.css" />
<![endif]-->

This is seen as just a normal comment in non-IE browsers, but IE will interpret it as code.

See: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

You can use conditional CSS by using

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

Like that there is a way to check if it's Internet Explorer or not.

For example, Conditional stylesheets vs CSS hacks? Answer: Neither!.

While that is possible, it would be better, to make sure that you eliminate all causes for different CSS in the first place. Does your HTML document have a DOCTYPE so that IE is in Standards Mode? If it does then show us the concrete situation where you think you need different CSS, because there is most likely a better solution.

    <script type = "text/javascript">
    function checkBrowser()
    {
      var browserName=navigator.appName; 
      if (browserName=="Netscape")
      { 
        //set height as 45px;
      }
      else 
      { 
        if (browserName=="Microsoft Internet Explorer")
        {
       //set height as 50px;
        }
     }    
}
</script>