CSS class/properties 针对 IE 和 Edge

Question

我想结合@media 和@support，这样我就不必为 IE11 和 Edge 放置两次相同的 css class 和属性。

请参考以下代码片段：

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .my_css_class{
        padding: 38px 15px 0px !important;
    }
}
/* Microsoft Edge */
@supports (-ms-ime-align:auto) {
    .my_css_class {
        padding: 38px 15px 0px !important;
    }
}

类似于：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none),  @supports (-ms-ime-align:auto)  {
    .my_css_class{
        padding: 38px 15px 0px !important;
    }
}

在 CSS 中，我们是否有一些方法可以合并或组合两个浏览器的属性，而不是两次具有相同的 properties/class。

Answer 1

@media 和@supports 等 at 规则是单独的规则，不能按其 at 关键字组合在一起。

这意味着不可能用一对花括号组合两个不同的 at 关键字来编写单个规则。

更多可以参考这个link:

CSS class/properties 针对 IE 和 Edge

CSS class/properties targeting to IE as well as Edge

css

browser

cross-browser

internet-explorer-11

microsoft-edge