Skip to content

Instantly share code, notes, and snippets.

@jakeho

jakeho/IE CSS Hacks All - IE6, 7, 8, 9, 10, 11, Edge

Forked from amirsuhail786/IE CSS Hacks All - IE6, 7, 8, 9, 10, 11, Edge
Created February 27, 2018 02:45
Show Gist options
  • Save jakeho/9f0f9d5a3bfcbd7d4626fc6ff9610367 to your computer and use it in GitHub Desktop.
Save jakeho/9f0f9d5a3bfcbd7d4626fc6ff9610367 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Zunair Mushtaq renamed this gist Mar 1, 2016. 1 changed file with 0 additions and 0 deletions.
    0 ...All Browsers - IE6, 7, 8, 9, 10, 11, Edge → ...SS Hacks All - IE6, 7, 8, 9, 10, 11, Edge
    View file
    File renamed without changes.
  2. Zunair Mushtaq revised this gist Mar 1, 2016. 1 changed file with 20 additions and 2 deletions.
    22 changes: 20 additions & 2 deletions IE CSS Hacks All Browsers - IE6, 7, 8, 9, 10, 11, Edge
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,10 @@
    " Make IE Better Compatible "

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    ======================================================
    IE6 Only
    ==================
    _selector {...}
    @@ -65,16 +72,27 @@ Usage:
    .ie10 .selector {...}

    == More info here: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/
    ---------------------------------

    IE10 and IE11
    IE10 and IE11 (Method 1)
    ==================
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .selector { property:value; }
    }
    ---------------------------------

    IE10 and IE11 (Method 2)
    ==================
    @media all and (-ms-high-contrast:none){
    .foo { color: green } /* IE10 */
    *::-ms-backdrop, .foo { color: red } /* IE11 */
    }
    ---------------------------------

    /*----MS Edge Browser CSS Start----*/
    @supports (-ms-accelerator:true) {
    .selector { property:value; }
    .edu_input_field{ width:15.1% !important; }
    }
    /*----MS Edge Browser CSS End----*/
    /*----MS Edge Browser CSS End----*/
    ---------------------------------
  3. Zunair Mushtaq renamed this gist Mar 1, 2016. 1 changed file with 0 additions and 0 deletions.
    0 ...IE CSS Hacks - IE6, 7, 8, 9, 10, 11, Edge → ...All Browsers - IE6, 7, 8, 9, 10, 11, Edge
    View file
    File renamed without changes.
  4. Zunair Mushtaq created this gist Jan 19, 2016.
    80 changes: 80 additions & 0 deletions All IE CSS Hacks - IE6, 7, 8, 9, 10, 11, Edge
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    IE6 Only
    ==================
    _selector {...}

    IE6 & IE7
    ==================
    *html or { _property: }

    IE7 Only
    ==================
    *+html or { *property: } - Keep in mind that you have to put the IE7 property first within the same selector.

    IE8
    ==================
    .selector/*\**/ { color:#f00; }
    **NOTE**: LESS v1.5.0 shoots out an error when compiling the CSS if you use this hack :/


    IE8 and IE9 (TOTALLY NOT NEEDED - I LEFT HERE FOR REFERENCE ONLY)
    ==================
    .selector { color:#f00\9; } - http://stackoverflow.com/questions/660652/ie8-css-selector

    The above solution doesn't work with font-family, so instead you need to use "\0/ !important"
    Example: { font-family:Arial \0/ !important; }
    http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

    Also, using "\9" is picked up by IE10 and IE11 so you need to redeclare the CSS rules with "-ms-high-contrast:". See info below.

    IE9 Only
    ==================
    :root .class/#id { property:value \0/IE9; }
    **NOTE**: Prepos v4.0.1 shoots out an error when compiling the CSS if you use this hack :/
    http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx

    IE10 Only
    ==================
    Method 1: UA Sniffing, which isn't the most loved method to target browsers, but here it is anyway.
    http://css-tricks.com/ie-10-specific-styles/

    Place this script in the <head>:
    <script>
    var doc = document.documentElement;
    doc.setAttribute('data-useragent', navigator.userAgent);
    </script>

    Usage:
    html[data-useragent*='MSIE 10.0'] .selector {...}

    Method 2: It used 'Conditional compilation' which is not UA sniffing. Also, it excludes IE11 as well.
    http://www.impressivewebs.com/ie10-css-hacks/
    Conditional compilation: https://msdn.microsoft.com/en-us/library/8ka90k2e(v=vs.94).aspx

    Place this script in the <head>:
    <!--[if !IE]><!-->
    <script>
    if (/*@cc_on!@*/false && document.documentMode === 10) {
    document.documentElement.className+=' ie10';
    }
    </script>
    <!--<![endif]-->

    Note: Seems the Conditional Comment is not necessary, but I like to include it for godo measure.

    Usage:
    .ie10 .selector {...}

    == More info here: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

    IE10 and IE11
    ==================
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .selector { property:value; }
    }

    /*----MS Edge Browser CSS Start----*/
    @supports (-ms-accelerator:true) {
    .selector { property:value; }
    .edu_input_field{ width:15.1% !important; }
    }
    /*----MS Edge Browser CSS End----*/