CSS 中的目标边缘金丝雀答案

【问题标题】：Target Edge Canary in CSSCSS 中的目标边缘金丝雀
【发布时间】：2019-08-30 14:05:38
【问题描述】：

要修复图像大小调整错误，我需要在 CSS 中定位 Edge Canary。

具体来说，我使用的是 Microsoft Edge 版本 76.0.151.0（官方构建）金丝雀（64 位） macOS Mojave 10.14.6

我试过@supports (-ms-ime-align: auto) { } 但这不起作用。是否有新的 hack 可用？

【问题讨论】：

也许您可以显示图像大小调整错误，我们可以制定一个不需要针对特定浏览器版本的解决方案。
虽然接受的答案是问题的正确答案，但正如您所建议的那样，我实际上设法在没有定位的情况下解决了它。我在 flex 容器中的图像高度扭曲，除非我设置 height: 100%; 在 Firefox 和 Chrome 中带来不同的结果。但是，将每个图像包装在一个额外的 div 中解决了这个问题。

标签： css microsoft-edge targeting

【解决方案1】：

使用 chromium 引擎的 Microsoft Edge Canary 版本，因此@supports (-ms-ime-align: auto) 无法将其检测为 Edge 浏览器。

作为替代解决方法，我建议您可以使用 window.navigator.UserAgent 来检查浏览器是否为 Microsoft Edge(Chromium)，这是一个 JavaScript 方法。

代码如下：

<script>
    var browser = (function (agent) {
        switch (true) {
            case agent.indexOf("edge") > -1: return "edge";
            case agent.indexOf("edg") > -1: return "chromium based edge (dev or canary)";
            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
            case agent.indexOf("trident") > -1: return "ie";
            case agent.indexOf("firefox") > -1: return "firefox";
            case agent.indexOf("safari") > -1: return "safari";
            default: return "other";
        }
    })(window.navigator.userAgent.toLowerCase());
    document.body.innerHTML = window.navigator.userAgent.toLowerCase() + "<br>" + browser;
</script>

浏览器代理字符串如下：

Edge 浏览器用户代理：

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/64.0.3282.140 safari/537.36 edge/18.17763
Microsoft Chromium Edge 开发用户代理：

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/76.0.3800.0 safari/537.36 edg/76.0.167.1
Microsoft Chromium Edge Canary 用户代理：

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/76.0.3800.0 safari/537.36 edg/76.0.167.1
IE浏览器userAgent：

mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; rv:11.0) like gecko
Chrome浏览器用户代理：

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/74.0.3729.169 safari/537.36

[注意] 如果您的网站被浏览器定位为 UA 字符串覆盖，您可能无法使用 userAgent 正确检测浏览器，具体取决于这些覆盖显示的内容。

【讨论】：