媒体查询在IE11中不起作用(解决问题)
媒体查询是一种在CSS中使用的技术，用于根据设备的特性和屏幕尺寸来应用不同的样式。然而，在IE11中，媒体查询可能不起作用的原因是因为IE11不完全支持所有的CSS3媒体查询规范。
为了解决这个问题，可以采取以下几种方法：
- 使用Polyfill库：Polyfill库是一种JavaScript库，可以在不支持某些功能的浏览器中模拟这些功能。对于IE11中不支持的媒体查询，可以使用一些Polyfill库，如Respond.js或css3-mediaqueries-js。这些库可以在IE11中解析和应用媒体查询，并使其起作用。
- 使用JavaScript检测和应用样式：通过使用JavaScript，可以检测浏览器的窗口大小或其他设备特性，并根据条件动态地应用相应的样式。可以使用window.matchMedia()方法来检测媒体查询条件是否匹配，并根据结果来应用相应的样式。
- 使用IE11特定的样式表：如果媒体查询在IE11中不起作用，可以考虑为IE11单独创建一个样式表，并在HTML文档中使用条件注释来引入该样式表。条件注释是一种只在特定版本的IE浏览器中生效的注释语法，可以用来针对IE11应用特定的样式。
- 优化媒体查询的使用：在编写媒体查询时，可以尽量避免使用复杂的查询条件和嵌套，以提高在IE11中的兼容性。可以使用较简单的查询条件，如最大宽度或最小宽度，而不是复杂的组合条件。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云CDN加速：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
相关·内容
我在以下一些内容下面添加了人力资源行： .h-divider{border: 2px solid #f3a51f; width:80px;}
}
在这里，我希望Hr (分配器)应该在右侧的大型设备上，而在中心(bydefault)在小型设备上上面的css在Chrome和Firefox上正
浏览 5提问于2020-03-04得票数 0
回答已采纳
我使用CSS中的媒体查询来缩放我的网页，这取决于IE11和Chrome的屏幕分辨率。当我在2个不同的屏幕上用chrome运行this webpage (顺便说一下，我用它来确定我的最小宽度)时，我在小屏幕上得到1366x768，在大屏幕上得到1920x1080。当我在IE11的两个屏幕上运行相同的网页时，我得到的结果都是1920x1080。这意味着我使用的媒体查询将不适用于IE，因为宽度是1920。
浏览 21提问于2019-07-02得票数 0
回答已采纳
我正在寻找一种方法，以防止触摸设备“模拟”悬停事件。原因是您不能在触摸设备上悬停，就像在带有光标的桌面上那样，这有时会影响用户体验。
浏览 1提问于2019-04-26得票数 3
回答已采纳
我在使用IE11类似的时遇到了一些问题。我有一个菜单，它以一定的大小(1440px)展开，并在IE11中中断。通过媒体查询，我可以使用(-ms-high-contrast: none), (-ms-high-contrast: active)来定位IE11。media screen and (min-width: 1440px) and (-ms-high-contrast: none) and (-ms-high-contrast: active)
但它们似乎
浏览 1提问于2018-03-01得票数 0
在页面上，它不应该“生动活泼”，而应该按到适当的位置。但是，在IE11上，当页面加载时，只有在与该元素相关的媒体查询匹配选择器的最高CSS专用性的情况下，转换才会被“播放”。奇怪的是，媒体查询甚至不合适(在我的测试中加载页面时不应该应用)。但是，IE11似乎应用了媒体查询，然后返回到非媒体查询CSS，这实际上触发了转换。如果媒体
浏览 3提问于2014-09-04得票数 12
@keyframes marquee2 {}不能在Internet 11上工作，也不能很好地在边缘上工作。所有其他主流浏览器，如Firefox或Chrome都运行得很好。
浏览 2提问于2017-11-30得票数 1
1回答
我试图在我的网格站点中支持IE11，并且在一个媒体查询中有-ms-网格代码。我想激活-ms-网格仅在大于767 to的屏幕上。这样做是可行的：我将在IE11中获得-ms-网格代码，并且只使用IE11，但这是行不通的：
@media all and (-ms-high-contrast: none), (-ms-
浏览 2提问于2018-02-01得票数 0
回答已采纳
我第一次在自己创建的响应式网站中使用了嵌套媒体查询。这些帮助网站看起来像我想要的在12英寸笔记本电脑和肖像Ipads，它们可以很好地工作在所有的浏览器，除了Internet Explorer11(和下面的问题)。检查时，它指定IE11上不支持嵌套媒体查询。/*Some code*/ @media all and (min-height: 769px) { }
我可以做什么
浏览 1提问于2016-01-13得票数 0
在Bootstrap 4.1.3中构建导航栏时，右侧的下拉列表使用.dropdown-menu-right类，以防止在浏览器右侧裁剪导航栏。在IE10+中，当下拉菜单展开时，它会在右侧进一步推送边距(请参见此处的示例)(由于与客户端的保密协议，Navbar-brand已被删除) ? ?
浏览 16提问于2019-02-13得票数 0
回答已采纳
2回答
我试图使用媒体查询，使宽度的div 100%为较小的屏幕。然而，媒体查询似乎不适用于我的css文件。当我将媒体查询放在html文件上时，它似乎是有效的。但是当我把代码
浏览 8提问于2015-06-24得票数 1
回答已采纳
1回答
IE9-11 @媒体冲突
、、、、
最近我在IE中遇到了一个背景图片和媒体查询的问题。在我看来，IE9和10与媒体查询的背景属性相冲突，没有出现任何图像。在IE11中，只有“移动”图像出现。我已经做了两天了，完全不知所措。不幸的是，这在10和11中不起作用(谢谢微软)。任何帮助都是非常感谢的。同时我会继续做研究。
请记住，我只通过netrenderer.com测试过这一点，所以我不能100%确定结果是否准确。
浏览 2提问于2014-02-28得票数 0
2回答
在我目前的网站上，顶部的响应库在除IE之外的所有浏览器上都工作得很好。我在IE11中查看它，它打破了flexbox。我正在使用Autoprefixer为Flexbox添加所需的前缀，但它似乎仍在崩溃。
浏览 0提问于2014-06-26得票数 0
1回答
我有在Chrome和FF中工作的CSS代码，但不在IE11中。媒体查询根本不回应。因此，我决定将IE的CSS放在一个单独的文件中，并将整个代码包装在这段代码中：
@media all and (-ms-high-contrast: none), (-ms-high-contrast:
浏览 3提问于2017-11-01得票数 1
1回答
IE未读取媒体查询
、、、
有人知道IE的媒体查询的正确用法吗？我尝试在我的页面和对css文件的调用中使用媒体查询，但我仍然看不到媒体查询被引用。ul li .submenu{ } display:block;媒体查询的最佳位置是哪里IE11，这是我的meta标签：
<meta name="vie
浏览 1提问于2015-06-16得票数 1
1回答
我想支持IE10和IE11的快照模式，但是我不能完全支持Windows 8。这是我目前在CSS中使用的代码： @-ms-viewport{使用媒体
浏览 4提问于2013-10-29得票数 7
回答已采纳
1回答
CSS媒体查询的问题
、、、、
我正在尝试获得我的应用程序的正确点，以便我可以将媒体查询添加到我的应用程序中。我找到了一个名为的很棒的网站来测试我的应用程序。我运行我的应用程序，看到它显示我的应用程序在1257宽度和1576宽度之间刹车，然后我的应用程序就会恢复正常。所以我编辑我的查询来满足解决问题的需要，但它仍然不起作用？/Style/CommonStyle/Common1280Style.css" />
然后我将这个添加到媒体</em
浏览 0提问于2014-06-05得票数 0
1回答
background-size:cover似乎在iPhone 3上不起作用。我在某个地方读到，使用background-size:100%;可以解决问题，而且它确实解决了这个问题。我在互联网上搜索过，但我发现的都是对iPhone3和4的查询。是否只有Iphone 3有媒体查询？
编辑:我在下面的答案中发布了我的解决方案
浏览 2提问于2014-01-16得票数 0
1回答
使用IE11的视频失败
、、、、
我正试图通过iframe将视频嵌入html中。format=embed&player_autoplay=false"></iframe>
此视频在Firefox中运行良好。然而，当我试图查看IE11中的iframe嵌入式视频时，它不起作用，而是给了我“您需要Adobe来播放此视频”的消息--如果从原始链接查看，这在IE11中确实有效。我似乎不明白为什么这是行不通的，我希望有人能帮助我解决问题</em
浏览 3提问于2013-11-28得票数 1
回答已采纳
1回答
如何通过特性查询或媒体查询可靠地为不支持当前规范的浏览器创建CSS网格样式？
根据这样的文章，浏览器忽略了它们无法解析的CSS。因此，我期望负面特性查询即使在不支持它的浏览器上也能工作。例如，IE11不支持特性查询，因此我期望它忽略这一行，并在查询：@supports not (display: grid){}中应用样式。但是，正如您在这个测试中所看到的，。我为IE10+找到了一个媒体查询，但是这个
浏览 2提问于2018-02-28得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
