1

I know this possible duplicate question. but my scenario is different. I've came across possible SO solution but none fit for my situation.

is that any possible or valid like below combination, Im trying to combine resolution with media query only targeting IE 11 or above.

For example : 

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-width:992px) and (max-width:1024px) {
      .want-my-css-here{

    }

}

I've already done media query for common purpose like below

@media only screen and (min-width:992px) and (max-width:1024px) {
   .some-example-class{
         ....
    }
}

but in IE 11, few things are not working properly in particular resolution. For that, I've got media query for IE

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .dropdown {
        position: relative;
        display: block;
    }

    .dropdown-menu {
        top: 56%
    }
}

I want to know how to add resolution in above IE targeting media query.

Exactly what i need is .dropdown and .dropdown-menu should work in particular resolution of IE.

Or else pls tell me how do control this via javascript/ typescript. could some help me on this?

Below combination is not working for me

@media only screen and (min-width:992px) {
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .dropdown-menu {
            top: 36%
        }
    }
}

Thanks

Mr. Learner
  • 978
  • 2
  • 18
  • 48
  • did you tried this https://stackoverflow.com/questions/45973976/apply-only-to-ie-11-within-media-query-for-screen-size?answertab=votes#tab-top – Aishwarya Jan 29 '20 at 12:28
  • Does this answer your question? [Apply only to IE 11 within media query for screen size](https://stackoverflow.com/questions/45973976/apply-only-to-ie-11-within-media-query-for-screen-size) – AndrewL64 Jan 29 '20 at 12:31
  • @Aishwarya Yes already, and tried combination as mentioned there but not working – Mr. Learner Jan 29 '20 at 12:31
  • @AndrewL64 that weber's answer is not working for me. may be i could work after clean all caches. let me try one more time and come back – Mr. Learner Jan 29 '20 at 12:33

2 Answers2

3

Note

Internet Explorer (IE) 11 desktop application will end support for certain operating systems starting June 15, 2022. - Microsoft

Your @media logic is incorrect. Use and (max-width:1024px) and (min-width:992px) with both of the media features.

 @media  all and (-ms-high-contrast: none) and (min-width:992px)  and (max-width:1024px),
            (-ms-high-contrast: active) and (min-width:992px) and (max-width:1024px) {}

So you can fix this issue using two IE specific media-queries.

Body is purple on IE.

        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            body {
                background: purple;
            }
        }

Body is red on IE if width is between 1024 and 992 pixals.

        @media  all and (-ms-high-contrast: none) and (max-width:1024px)  and (min-width:992px),
        (-ms-high-contrast: active) and (min-width:992px)   and (max-width:1024px) {
            body {
                background: red;
            }
        }

FYI:

You can nest media-query, but IE 11 does not suppport it.

mahan
  • 12,366
  • 5
  • 48
  • 83
0

Thanks to every one. i fixed my issue myself, its because of conflict with custom css and bootstrap css

Mr. Learner
  • 978
  • 2
  • 18
  • 48