发表新帖
发表新帖

IE8 css selector

后端 未结
关注
14 1855
臣服心动
臣服心动 2020-11-30 22:44

To target elements only in IE browsers i\'ll use

IE6:

* html #nav li ul {
    left: -39px !important;
    border: 1px solid red;
}

相关标签:
14条回答
  • 醉梦人生
    2020-11-30 23:06

    2013 update: IE10+ no longer supports conditional comments.

    Original answer:

    Some people seem to be confused because this does not answer the letter of the question, only the spirit - so for clarification:

    There is no such thing as a browser selector. There are hacks that take advantage of bugs and/or glitches in specific browsers' CSS parsers, but relying on these are setting yourself up for failure. There is a standard, accepted way to deal with this:

    Use conditional comments to target IE only.

    Example:

    <!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->

    Everything inside the two <!--> will be ignored by all non-IE browsers as a comment, and IE versions that are less than IE8 will skip it. Only IE8 and greater will process it. 2013 update: IE10+ will also ignore it as a comment.

    0 讨论(0)
  • 清酒与你
    2020-11-30 23:06

    you can use like this. it's better than 

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

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
  <!--[if IE 7 ]> <body class="ie7"> <![endif]-->
  <!--[if IE 8 ]> <body class="ie8"> <![endif]-->
  <!--[if !IE]>--> <body> <!--<![endif]-->

    div.foo { color: inherit;} .ie7 div.foo { color: #ff8000; }

    0 讨论(0)
  • 悲&欢浪女
    2020-11-30 23:06

    I realize this is an old question but it was the first result on Google when I searched and I think I have found a better solution than the highest ranked suggestion and what the OP chose to do.

    #nav li ul:not(.stupidIE) { color:red }

    So technically this is the opposite of what the OP wanted, but that just means you have to apply the rule you want for IE8 first and then apply this for everything else. Of course you can put anything inside the () as long as it is valid css that doesn't actually select anything. IE8 chokes on this line and doesn't apply it, but previous IEs (ok I only checked IE7, I have stopped caring about IE6), just ignore the :not() and do apply the declarations. And of course every other browser (I tested Safari 5, Opera 10.5, Firefox 3.6) applies that css as you would expect.

    So this solution, I guess like any other pure CSS solution would assume that if the IE developers add support for the :not selector then they will also fix what ever discrepancy was causing you to target IE8.

    0 讨论(0)
  • 醉酒成梦
    2020-11-30 23:09

    Building upon image72's excellent answer, you could actually have advanced CSS selectors like this:

    <!--[if lt IE 7]><body class="IE IE7down IE8down IE9down IE10down"><![endif]-->
<!--[if IE 7]><body class="IE IE7 IE7down IE8down IE9down IE10down IE7up"><![endif]-->
<!--[if IE 8]><body class="IE IE8 IE8down IE9down IE10down IE7up IE8up"><![endif]-->
<!--[if IE 9]><body class="IE IE9 IE9down IE10down IE7up IE8up IE9up"><![endif]-->
<!--[if gte IE 10]><body class="IE IE10 IE10down IE7up IE8up IE9up IE10up"><![endif]-->
<!--[if !IE]>--><body class="notIE"><!--<![endif]-->

    so that in your css you can do this:

    .notIE   .foo { color: blue;   } /* Target all browsers except IE */
.IE9up   .foo { color: green;  } /* Taget IE equal or greater than 9 */
.IE8     .foo { color: orange; } /* Taget IE 8 only */
.IE7down .foo { color: red;    } /* Target IE equal or less than 7 */

.IE8 .foo, .IE9 .foo {
    font-size: 1.2em;            /* Target IE8 & IE9 only */
}

.bar { background-color: gray; } /* Applies to all browsers, as usual */

/* Maybe show a message only to IE users? */
.notIE #betterBrowser { display: none;  } /* Any browser except IE */
.IE    #betterBrowser { display: block; } /* All versions of IE */

    This is great because:

    • It's perfectly standards compliant (no ugly/dangerous css hacks)
    • No need to have separate stylesheets
    • You can easily target any version of IE as well as complex combinations
    0 讨论(0)
  • 长发绾君心
    2020-11-30 23:16

    Take a look at these:

    /* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }

/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }

    (Source: David Bloom’s CSS hack for IE8 Standards Mode)

    0 讨论(0)
  • 忘掉有多难
    2020-11-30 23:17

    This question is ancient but..

    Right after the opening body tag..

    <!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->

    Right before the closing body tag..

    <!--[if gte IE 8]>
</div>
<![endif]-->

    CSS..

    #IE8Body #nav li ul {}

    You could do this for all IE browsers using conditional statements, OR target ALL browsers by encapsulating all content in a div with browser name + version server-side

    0 讨论(0)
 看不清?
提交回复
热议问题