css 目标是 IE 和 Microsoft Edge

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，这（由于自动更正）仍然适用于某些 browsers/versions。 http://browserhacks.com/对于这个
使用JavaScript设置一个CSS-Class like is-internet-explorer，然后在css中用来定位只有这样的浏览器。由于 userAgent 评估非常困难，并且浏览器经常伪装成另一个浏览器，因此您应该使用 JavaScript-Library 来完成这项繁琐的任务（例如 https://github.com/DamonOehlman/detect-browser）
使用一些服务器端逻辑来提供额外的 CSS-Filer 或设置额外的 class。这与#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

css target IE and Microsoft Edge

html

css

internet-explorer

microsoft-edge