Media queries for ie only

Question

Ie is being weird again.

Our team is trying to add some styles for ie only so resize some text that lays on an image. The first ms-high-contrast works however all the following media queries fail. Is there a better more eloquent way to do this?

We're at a loss. What's up with ie?

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .homebox .mdlogolg{
        left: -60px;
    }
    @media (max-width: 1199px) and (min-width: 992px) {
        .homebox .mdlogolg{
            left: -60px;
        }
    }
    @media (max-width: 991px) and (min-width: 768px) {
        .homebox .mdlogolg{
            left: -36px;
        }
    }
    @media (max-width: 767px) {
        .homebox .mdlogolg{
            left: -25px;
        }
    }
}

try unnesting the queries: https://stackoverflow.com/questions/7668301/is-it-possible-to-nest-media-queries-within-media-queries — Lucas, Jul 05 '17 at 17:58
you can add the ie only query inside your subqueries, using 'and', see the answer from my link for an example — Lucas, Jul 05 '17 at 18:00
see this fiddle for reference: https://jsfiddle.net/0kc3dbmL/2/ — Lucas, Jul 05 '17 at 18:09

score 2 · Answer 1 · answered Nov 28 '17 at 14:45

You can achieve the above by separating those media queries (because, nesting won't work). Try the following code...

@media (max-width: 1199px) and (min-width: 992px) and (-ms-high-contrast: none), (max-width: 1199px) and (min-width: 992px) and (-ms-high-contrast: active) {
    .homebox .mdlogolg{
        left: -60px;
    }
}
@media (max-width: 991px) and (min-width: 768px) and (-ms-high-contrast: none), (max-width: 991px) and (min-width: 768px) and (-ms-high-contrast: active) {
    .homebox .mdlogolg{
        left: -36px;
    }
}
@media (max-width: 767px) and (-ms-high-contrast: none), (max-width: 767px) and (-ms-high-contrast: active) {
    .homebox .mdlogolg{
        left: -25px;
    }
}

Eugene Mikhushkin · Answer 2 · 2017-07-06T08:38:50.307

0

Actually, there is no media queries for IE, but you can create separate stylesheet for IE with all properties and he will apply automatically, if it IE.

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

This article might help you. Also, you can watch at code example of Bootstrap, what they invent for IE supporting.

edited Jul 06 '17 at 08:38

answered Jul 06 '17 at 08:28

Eugene Mikhushkin

155
2
10

Media queries for ie only

2 Answers2