css 目标 IE 和 Microsoft Edge答案

【问题标题】：css target IE and Microsoft Edgecss 目标 IE 和 Microsoft Edge
【发布时间】：2018-03-11 09:18:55
【问题描述】：

针对 IE 和 Microsoft Edge 申请特定 css 的正确方法是什么？

这是我的通用 css：

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

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

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

欢迎任何帮助！

【问题讨论】：

使用脚本并添加类到正文，脚本应该看起来像if (document.documentMode || /Edge/.test(navigator.userAgent)){$('body').addClass('edge-ie')}，而不是你可以通过CSS控制字体大小或其他任何东西，如.edge-ie .details-list { font-size: 15px; }

标签： html css internet-explorer microsoft-edge

【解决方案1】：

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

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

【讨论】：

【解决方案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;
    }
}

【讨论】：