发表新帖
发表新帖

Target IE9 or IE8 but not both using CSS

前端 未结
关注
4 1851
旧巷少年郎
旧巷少年郎 2020-12-16 02:56

I know it shouldn\'t be done, but I just want a quick fix for now and that will give me time to find a proper fix for this.

How can I target IE8 alone using CSS bec

相关标签:
4条回答
  • 名媛妹妹
    2020-12-16 02:59

    You can use root function

    :root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */

    hack only on IE

    #element {
color:orange;
}
#element {
*color: white;    /* IE6 + 7, doesn't work in IE8/9 as IE7 */
}
#element {
_color: red;     /* IE6 */
}
#element {
color: green\0/IE8+9; /* IE8 + 9 + IE10pp4  */
}
:root #element { color:pink \0/IE9; }  /* IE9 + IE10pp4 */
    0 讨论(0)
  • 耶瑟儿～
    2020-12-16 03:05

    There is three ways to do this,

    IE Conditional Comments

    IE conditional comment is probably the most commonly used to fix the IE bugs for specific versions (IE6, IE7, IE8). Below are some sample code to target different versions of Internet Explorer:

        <!--[if IE 8]> = IE8
    <!--[if lt IE 8]> = IE7 or below
    <!--[if gte IE 8]> = greater than or equal to IE8

    <!--[if IE 8]>
<style type="text/css">
    /* css for IE 8 */
</style>
<![endif]-->

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

    CSS Rules Specific to Explorer (IE CSS hacks)

    Another option is to declare CSS rules that can only be read by Explorer. For example, add an asterisk (*) before the CSS property will target IE7 or add an underscore before the property will target IE6. However, this method is not recommended because they are not valid CSS syntax.

    IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon.
IE7 or below: add an asterisk (*) before the CSS property.
IE6: add an underscore (_) before the property.

.box {

    background: gray; /* standard */

    background: pink\9; /* IE 8 and below */

    *background: green; /* IE 7 and below */

    _background: blue; /* IE 6 */

}

    Conditional HTML Class

    The third option, which was founded by Paul Irish, is to add an CSS class with the IE version to the HTML tag by using IE conditional comments. Basicially, it checks if it is IE, then add a class to the html tag. So to target specific IE version, simply use the IE class as the parent selector (eg. .ie6 .box). This is a clever way and it doesn't cause any validation errors.

    <!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
    0 讨论(0)
  • 臣服心动
    2020-12-16 03:09

    This should work only in IE9 (and probably newer versions as well):

    :root #element-id {
  margin: 400px\9;
}

    It is because :root pseudo class is not implemented in versions prior to IE9 (see http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx).

    0 讨论(0)
  • 你的背包
    2020-12-16 03:20

    From the HTML5 Boilerplate and originally from Paul Irish:

    Change your <html> tag to this:

    <!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

    Then IE8 will add a .ie8 class to the html tag. Same for all the other versions of IE. You can then do:

    .ie8 {
    margin:100px;
}

    Edit: Removed the no-js class, and please update the lang="" attribute to your language. Thanks, eyelidlessness.

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