How can I set CSS only for specific IE browsers?

后端 未结 7 2237
庸人自扰
庸人自扰 2020-12-13 22:24

I have a CSS/jQuery Checkbox style script: http://jsfiddle.net/BwaCD/

The problem is, in current browsers in order for the span to float over the input, the input\'s

相关标签:
7条回答
  • 2020-12-13 22:44

    http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575

    on the example: color : green\9;

    \9 didn't work for ie11, but \0 worked!

    0 讨论(0)
  • 2020-12-13 22:45

    How about that?

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

    Or that if you don't like those statements

    http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

    0 讨论(0)
  • 2020-12-13 22:51

    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 5 ONLY

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

    Target IE 5.5 ONLY

    <!--[if IE 5.5000]>
    <link rel="stylesheet" type="text/css" href="ie55.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 6 and HIGHER

    <!--[if gt IE 5.5]>
        <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
    <![endif]-->
    <!--[if gte IE 6]>
        <link rel="stylesheet" type="text/css" href="ie6-and-up.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]-->
    
    0 讨论(0)
  • 2020-12-13 22:54

    EDIT (Aug. 28): Note that the following answer is relevant, in practice, only for Internet Explorer, at least versions 8 and earlier. To my knowledge, no mainstream browser now supports conditional comments, not even Internet Explorer 11.


    You can use Internet Explorer's conditional comments to add a class name to the HTML root tag for older IE browsers:

    <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
    <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
    <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    

    Then you can define IE-specific CSS by referencing the appropriate class name, like this:

    .ie8 body {
       /* Will apply only to IE8 */
    }
    

    Source: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

    0 讨论(0)
  • 2020-12-13 22:58

    I solved in this way for the grab cursor in Internet Explorer:

    .grab_cursor {
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
        cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
        cursor: url('img/cursors/openhand.cur'), n-resize\9; /* IE 8 and below */
        *cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
        _cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
    }
    

    In Internet Explorer for Windows up to and including version 8, if a relative URI value is specified in an external style sheet file the base URI is considered to be the URI of the document containing the element and not the URI of the style sheet in which the declaration appears.

    Files tree:

    index.html
    css/style.css -> here the posted code
    img/cursors/openhand.cur
    

    Good references:

    • One
    • Two
    • Three
    • Four
    0 讨论(0)
  • 2020-12-13 23:00

    I have a useful solution for IE 10 and 11. The script checks for IE and version and then appends .ie10 or .ie11 class to the tag.

    That way you can write specific rules like .ie10 .something {} and they get applied only when the browser is IE 10 or 11.

    Check it out, it's useful for graceful degradation, tested on a few commercial sites and not really hacky: http://marxo.me/target-ie-in-css

    0 讨论(0)
提交回复
热议问题