how to specify different css for ie

问题:

I need to include different .css files for IE anf all other browsers.

I tried the following but it doesn't work.

<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="css/my_style.css">
<!--<![end if]-->
<!--[if IE]><!-->
<link type="text/css" rel="stylesheet" href="css/my_style_IE.css">
<!--<![end if]-->

回答1:

You can give css path this way for IE condition.

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

You can get better help from below link.

http://www.quirksmode.org/css/condcom.html

Enajoy...!! :)

回答2:

Here is a good page that gives a great list of examples for what you are looking for:

ie only stylesheet

Target ALL VERSIONS of IE

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

Target everything EXCEPT IE

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

Target IE 7 ONLY

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

Target IE 6 ONLY

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

Target IE 6 and LOWER

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

回答3:

Check this About conditional comments

Example:

<!--[if IE]>
<p>Welcome to Internet Explorer.</p>
<![endif]-->

回答4:

I think you missed /> at the end of your link elements

<link type="text/css" rel="stylesheet" href="css/my_style.css" />

回答5:

What happens when try it like this?

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

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

回答6:

You've got several errors defining the conditional comments:

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

This should do the trick.