How can I target only IE (any version) with min-width: 600px in a style sheet?

Question

I notice a Div in my project is not aligning properly in IE only. I want to target only IE (any version) to fix this. Below is the styles applied to the div:

#my-sidebar {
position: absolute;
top: 0;
right: 133px;
margin: 0;
padding: 0;

}

I need the declaration right: 133px; to only apply in IE and only when the page width is 600px and above. How can I achieve this?

Might need to be more specific: which version(s) of IE do you wish to target? — James Donnelly, Feb 01 '16 at 11:04

score 1 · Answer 1 · answered Feb 01 '16 at 12:21

Write a stylesheet for IE, For IE9 and lower, you can load an IE-specific stylesheet.like this

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

And in that stylesheet, write your code as

@media only screen and (min-width: 600px){
  #my-sidebar {
     position: absolute;
     top: 0;
     right: 133px;
     margin: 0;
     padding: 0;
}

IE10 and above are no longer supports conditional comments.

So For IE10+, create a media query using -ms-high-contrast in your main css file, and place your css

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     @media only screen and (min-width: 600px){
          #my-sidebar {
               position: absolute;
               top: 0;
               right: 133px;
               margin: 0;
               padding: 0;
          }
     }
}

How can I target only IE (any version) with min-width: 600px in a style sheet?

1 Answers1