更新

Question

您如何定位Microsoft Edge，同时又通过媒体查询定位宽度？

我尝试嵌套：

@media (min-width:1700px) {
    @supports (-ms-ime-align: auto) {
       .grid-image {
           width: calc(100% / 7);
       }
   }
}

和其他一些奇怪的东西

@media (min-width:1700px) and (-ms-ime-align: auto) {
    .grid-image {
        width: calc(100% / 7);
    }
}

，没有任何效果。非常感谢您的帮助！

Answer 1

Edge最近（在2019年）切换到基于Chromium的浏览器，现在其行为将比预期的要多得多。 ~~calc（）函数现在可以正确舍入小数，这将在将来节省很多麻烦。~~话虽如此，对于那些不愿意这样做的人，未来几年您仍将需要较旧的目标版本不会经常更新浏览器。

使用它来定位宽度已设置的IE10 / Edge +前置铬基底：

@media all and (-ms-high-contrast: none) and (min-width : 1700px),
(-ms-high-contrast: active) and (min-width : 1700px) {
}

另一种选择是使用JavasScript添加类。

下面的示例很旧...一旦我可以找到另一台较旧的PC进行测试，就会更新...切换到chrome也使我也更新了一些代码。

navigator.browser=function(){var e=navigator.appName;var t=navigator.userAgent;var n;var r=t.match(/(edge|opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);if(r&&(n=t.match(/version\/([\.\d]+)/i))!=null){r[2]=n[1]}if(r){r={name:r[1].toLowerCase(),versionExt:r[2]}}else{r={name:e.toLowerCase(),versionExt:navigator.appVersion}}var i=r.versionExt.split(".");r.version=parseInt(i[0]);if(typeof i[1]=="string"&&i[1].match(/^[\d]+$/i)!=null){r.sub=parseInt(i[1]);r.subversion=parseFloat(r.version+"."+r.sub)}return r}()
$(document).ready(function(){
    if (/edge/i.test(navigator.userAgent)) {
      var ua = navigator.userAgent.toLowerCase();
      var pos = ua.indexOf('edge/');
      var version = ua.substr(pos + 5);
      var parts = version.split(".");
      var mainVersion = parts[0];
      $('html').addClass('edge');
      $('html').addClass('edge-' + mainVersion);
      if (navigator.browser.name == 'netscape') {
        $('html').addClass('edge-pre-chromium');
      }
      else {
        $('html').addClass('edge-chromium');
      }
    }       
    else if (/windows/i.test(navigator.userAgent) && navigator.browser.name == 'netscape') {
      $('html').addClass('edge');
      $('html').addClass('edge-pre-chromium');
    }       
});

希望有帮助。我知道这有点老了，但希望将来能对其他人有所帮助。

更新

可悲的是，在Chromium版本中calc（）函数仍在取整。上面的JavaScript似乎可以正确检测到其他版本。

IE12 +的纯CSS目标。

@media only screen and (min-width : 1700px) {
  _:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }
}

上述内容的信用额为：How to Identify Microsoft Edge browser via CSS?

使用CSS和一定宽度定位Microsoft Edge

1 个答案:

更新