Question

我的CSS代码适用于Chrome和FF，但不适用于IE11。媒体查询根本没有回应。所以我决定将IE的CSS放在一个单独的文件中，并将整个代码包装在这段代码中：

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

我也试过改变这个：

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

到此：

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

但这也不起作用。有人知道解决方案吗？

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 */
}

Answer 1

我遇到了同样的问题，这个答案是我们的解决方案：https://stackoverflow.com/a/51903781/3215589

总结并复制Chase所写的原始答案：

  IE11不支持正文中的
样式（在    与其他HTML），因此不足为奇   奇怪。

将样式块重新定位到头部可以使IE11正确应用媒体查询。

这就是我们所做的一切，并且确实做到了！

媒体查询无法在IE11中运行

1 个答案: