css - 仅适用于 Internet Explorer 的媒体查询

Question

我知道可以只使用这个 CSS 获得 IE 的样式:

@media all and (-ms-high-contrast:none) {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: green } /* IE11 */
}

并且可以使用媒体查询使网站响应:

@media only screen and (max-width: 800px) {
    .foo { color: green }
}

如何编写代码来为 IE 仅在特定屏幕尺寸下制作样式？以下都不适合我，IE 只是忽略了这种风格:

@media only screen and (-ms-high-contrast:none) and (max-width: 800px)

@media all and (-ms-high-contrast:none) and (max-width: 800px)

想法？

Answer 1

IE、Safari、Chrome 和谷歌。出于某种原因，当我使用 flexbox 时，我的 div/列在 IE 上比其他 3 个主要浏览器占用更多空间。所以我必须在 IE 上指定 0 0 23% 的 flex，如果我想让 4 列适合一个页面，否则第 4 列会下降到其他 3 列之下。

然后，当浏览器尺寸减小(例如 < 1000px)时，我希望它是一个 2 列布局，我必须在 IE 上指定 0 0 48% 的 flex ( flex 为 0 0 50 % 其他地方)。

但是，我不知道如何为 <1000px 的 IE 屏幕指定 48% 的 2 列布局(同时在其他浏览器上保持 50%)。

希望这是有道理的。

除非我遗漏了什么。我对 flexbox 比较陌生，所以这是可能的。