【问题标题】:Target IE11 on specific screen sizes using CSS Media queries [duplicate]使用 CSS 媒体查询在特定屏幕尺寸上定位 IE11 [重复]
【发布时间】:2018-08-09 09:56:56
【问题描述】:

我在使用类似to this post 的 IE11 时遇到了一些问题。我有一个以特定大小(1440 像素)扩展并在 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。

【问题讨论】:

  • @SureshPonnukalai 是的!一分钟前发现的。在这篇文章中也添加了答案。

标签: css less media-queries internet-explorer-11


【解决方案1】:

使用 CSS:

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

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

记住 @media 也可以用于打印界面,所以@media screen 只是指定在屏幕上显示时要执行这些规则,但是不是在打印时。 @media 本身更广泛,适用于印刷。

使用 jQuery:

如果你想要纯 js,你可以翻译它: $( 窗口 ).width(); 要么 $( 文档 ).width(); (根据您需要的行为使用一种或另一种) 您可以通过以下方式以编程方式检查 screen 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 的类,您可以在其中放置 >1440p 时发生的任何事情。

元素与元素类相关(您甚至可以使用带有 $('#element') 的 id,专门设置在要采取此行为的元素处)。

希望对你有帮助

【讨论】:

  • 嗨!感谢您的回答,但正如问题中所解释的那样,我试图在没有 JS/jQuery 的情况下解决这个问题
  • 很抱歉,CSS 不是一种编程语言,所以它不能有条件地检查 -ms-high-contrast,你只能检查屏幕宽度。您是否尝试过(编辑帖子)
  • 我不确定您想通过编辑解决什么问题,因为 -ms-high-contrast 不是我想要实现的。感谢您的输入!我刚刚发布了我在其他地方找到的答案。
【解决方案2】:

在搜索 Stack Overflow 的深度后,我管理 to find someone 时遇到了同样的问题。

使用:

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

让它工作。

【讨论】:

    猜你喜欢
    • 2012-08-08
    • 2012-11-30
    • 2012-12-28
    • 1970-01-01
    • 1970-01-01
    • 2019-12-10
    • 2020-04-26
    • 2018-06-14
    • 2017-04-06
    相关资源
    最近更新 更多