Question

我在使用类似to this post的IE11时遇到了一些问题。我有一个扩展到一定大小（1440px）的菜单，并在IE11中断。使用媒体查询我可以使用(-ms-high-contrast: none), (-ms-high-contrast: active)来定位IE11。但是，我只想在某个分辨率（> 1440px）下使用它。

我尝试了各种

的组合

@media screen and (min-width: 1440px) and (-ms-high-contrast: none) and (-ms-high-contrast: active)

但他们似乎没有工作

如何在IE11中以屏幕大小> 1440px定位和元素而不影响其他浏览器或使用JS。

Answer 1

使用CSS：

@media(min-width: 1440px){
  .element{
    -ms-high-contrast: none;
  }
}

@media(max-width: 1440px){
  .element{
    -ms-high-contrast: active;
  }
}

请记住， @media也可以用于打印界面，因此@media屏幕只是指定在显示时实现这些规则屏幕，但不是打印时。 @media本身更广泛，适用于打印。

使用jQuery：

如果你想要普通的js你可以翻译它： $（window）.width（）; 要么 $（document）.width（）; （根据您需要的行为使用一个或另一个）你可以编程检查屏幕sixze：

$(document).ready(function(){
      if($(window).width() > 1440){
         $('.element').addClass('msClass');
      }else{
         if($('.element').hasClass('msClass'){
              $('.element').addClass('msClass');
         }
      }
});

这仅在文档加载时有效，但您可以添加动态函数：

//Window resize event listener, you'll need to put the other function first if you want it to being applied when you load the view.
      $(window).resize(function(){
              //if the actual window width is greater than 1440...
              if($(window).width() > 1440){
                 //add a class to the desired element/s (this class must include the changes you want when more than 1440p)
                 $('.element').addClass('msClass');
                 //if the screen resizes below 1440p...
              }else{
                 //if the class is set before
                 if($('.element').hasClass('msClass'){
                      //remove this class
                      $('.element').addClass('msClass');
                 }
              }
        });

如果你遵循这个例子，你必须创建一个名为msClass的类，你可以在＆gt; 1440p时放置你想要发生的任何内容。

元素与元素类相关（您甚至可以使用带有$（＆＃39;＃element＆＃39;）的id专门设置在您想要采取此行为的元素上。）

希望有所帮助

Answer 2

在搜索Stack Overflow的深度后，我管理to find someone同样的问题。

使用：

@media only screen and (min-width: 1440px) { 
   _:-ms-fullscreen, :root .THECLASSNAME { width: 575px; } 
}

让它发挥作用。

使用CSS Media查询在特定屏幕尺寸上定位IE11

2 个答案: