Question

将IE和Microsoft Edge用于申请特定CSS的正确方法是什么？

这是我的一般性CSS：

.details-list {
    font-size: 13px;
    font-style: italic;
    display: table;
    margin: 0 auto;
}

所以，假设我只想为Microssft Edge和IE增加字体大小。

最好的说法是什么（设置sass-如果有帮助的话）？

欢迎任何帮助！

Answer 1

通常应该避免使用特定于浏览器的CSS，但如果您真的需要，那么您将拥有各种可能性。这些应该是最常见的：

在html中使用条件注释来定位特定的IE版本： https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
通过编写语法错误的CSS来使用css hacks，这在某些浏览器/版本中仍然应用（由于自动更正）。 http://browserhacks.com/对于此
使用JavaScript设置类似is-internet-explorer的CSS类，然后在css中使用它来仅定位此类浏览器。由于userAgent评估非常困难，并且浏览器经常伪装成另一个浏览器，因此您应该使用JavaScript-Library执行这项繁琐的任务（例如https://github.com/DamonOehlman/detect-browser）
使用某些服务器端逻辑来提供额外的CSS-Filer或设置额外的类。这与＃3基本相同，但在服务器端。

Answer 2

如果要查找特定的CSS语句（例如object-fit:cover），请使用功能检测。这有一些好处，包括在浏览器实现该属性的情况下也可以工作。

@supports (object-fit:cover) {
    .element {
        height: 100%;
        object-fit:cover;
    }
}

否则，您可以使用CSS Hacks，这是用于此的SASS mixin：

/**
    Applies for all Internet Explorer and Edge versions
**/
@mixin worstBrowsers() {

    /* all IE versions <= 11 */
    @media screen and (-ms-high-contrast: none) {
        @content;
    }

    /* all edge versions */
    @supports (-ms-ime-align:auto) {
        @content;
    }

}


.element {
    @include worstBrowsers {
        font-size: .6em;
    }
}

css目标IE和Microsoft Edge

2 个答案: