如何仅在 IE 10+ 中定位屏幕查询

Question

我正在使用 flex-box 属性并尝试在 IE 10+ @media only screen and (max-width: 960px) 上定位 div，但我还没有找到实现该目标的方法。我在我的 CSS 代码末尾使用了这个 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { selector here... }，但那没有用。

这是我要执行的操作的简单代码。

.main {
 display: flex;
 flex-flow: row wrap;
 padding: 10px;
 border: 2px solid red;
 min-height: 300px;
 width: 100%;
 max-width: 960px;
 
 justify-content: space-between;
 align-items: center;
}

.L, .R {
 flex-basis: 48%;
 /*for IE */
 /* flex-basis: calc(48% - 24px); */
 border: 2px dotted blue;
 height: 200px;
}

@media only screen and (max-width: 768px) {
 .L, .R {
  flex-basis: 90%;
  /*for IE ** how can I add this only for IE 10+ ** */
 /* flex-basis: calc(90% - 24px); */
  margin-bottom: 10px;
 }
 .main {
  justify-content: center;
 }
}

<div class="main">
 <div class="L">
 </div>
 <div class="R">
 </div>
</div>

Answer 1

根据 this 论坛 post，使媒体查询仅适用于 IE10+ 的正确方法是这样做：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     .L, .R {
        flex-basis: calc(48% - 24px);
     }
}



@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), (max-width: 768px) {
     .L, .R {
        flex-basis: calc(90% - 24px);
     }
}

Answer 2

**Try this->**


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

Answer 3

无法在 css 中针对 IE 10+（仅）定位屏幕，但使用仅针对 IE 或 Javascript 的特殊 css 文件即可。

如何仅在 IE 10+ 中定位屏幕查询

How to target screen query only in IE 10+

html

css

internet-explorer

jquery-selectors

flexbox