1

I have CSS code that works in Chrome and FF, but not in IE11. The media queries don't respond at all. So I decided to put the CSS for IE in a separate file and wrap the entire code in this piece of code:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* CSS code here */
}

I also tried changing this:

@media *screen* and (min-width: ...) {}

to this:

@media *all* and (min-width: ...) {}

But that doesn't work either. Anyone knows a solution to this?

HTML 

  <div class="row">
      <div class="thumb col-sm-6">
        <div class="front"><img src="../img/image1.jpg"></div>
        <div class="back">
          <p>Some text</p>
        </div>
      </div>

      <div class="thumb col-sm-6">
        <div class="front"><img src="../img/image2.jpg"></div>
        <div class="back">
          <p>Some text</p><br>
        </div>
      </div>
  </div>

CSS

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

* {
    margin: 0;
    padding: 0;
}

html, body {
    position: relative;
    font-family: 'Helvetica', sans-serif;
    font-size: 16px;
    width: 100%;
    height: 100%;
}

.background {
    background: url("../img/background.jpg") center no-repeat fixed;
    background-size: cover;
}

.main {
    width: 100%;
    position: relative;
}

.thumb {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
    margin-bottom: 50px;
}

.front {
    position: absolute;
    top: 0;
    left: 30%;
    width: 150px;
    height: 114.48px;
    z-index: 10;
    border-radius: 15px;
    cursor: pointer;
}

.front img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    border: 3px solid rgb(163, 0, 0);
}

.back {
    position: absolute;
    top: 0;
    left: 30%;
    width: 150px;
    height: 114.48px;
    font-size: 1em;
    text-align: center;
    background-color: #fff;
    border-radius: 15px;
    z-index: 9;
    padding: 10px;
    border: 3px solid rgb(163, 0, 0);
    overflow: hidden;
}

.back a, .back a:visited {
    text-decoration: none;
    color: #000;
    font-weight: 900;
}

.back a:hover {
    text-decoration: none;
    color: rgb(163, 0, 0);
    cursor: pointer;
}

#anderfolk-img {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 250px) { 
    .thumb {
        height: 190px;
    }
    .front {
        width: 200px;
        height: 152.64px;
    }
    .back {
        width: 200px;
        height: 152.64px;
    }
}

/* Medium screens */

@media screen and (min-width: 450px) {
    .thumb {
        height: 230px;
    }
    .front {
        width: 250px;
        height: 190.8px;
    }
    .back {
        width: 250px;
        height: 190.8px;
    }
}

/* Large screens */

@media screen and (min-width: 768px) {
    .main .container {
        margin-top: 50px;
    }
    .thumb {
        height: 320px;
    }
    .front {
        width: 320px;
        height: 245.65px;
    }
    .back {
        width: 320px;
        height: 245.65px;
    }
}
/* End of @media all */
}
Isoldhe
  • 300
  • 1
  • 7
  • 20
  • 1
    Could your problem be related to media queries nesting? https://stackoverflow.com/questions/11746581/nesting-media-rules-in-css#answer-11747166 – Morpheus Nov 01 '17 at 17:07
  • Thanks. I think this solved it: I closed the 'media all' code at the top before all the 'media screen' queries, so they are no longer nested. The code inside the queries respond now. – Isoldhe Nov 01 '17 at 17:17

1 Answers1

0

I had the same issue and this answer was the solution for us: https://stackoverflow.com/a/51903781/3215589

Summarising and copying from the original answer written by Chase:

style in the body was not supported in IE11 (Using tags in the with other HTML) so it is not surprising there would be some weirdness.

Relocating the style block to the head made IE11 correctly apply the media queries.

And that's all that we did, and did work!

Mark
  • 379
  • 3
  • 11