IE11不应用媒体查询样式 [英] Ie11 doesn't apply media queries style
问题描述
IE11会忽略我的媒体查询，而始终使用移动CSS.
IE11 ignore my media queries and always using the mobile css.
奇怪的是，如果我改变浏览器的宽度，即使只有1-2像素，浏览器也会渲染自己并显示媒体查询.
the weird thing is that if i'll change the browser width, even for just 1-2 pixel, the browser will render itself and the media queries are shown.
我尝试过css lint，但我的css中没有错误.
i tried css lint and i have no errors in my css.
我的CSS没有什么特别的.像这样简单的CSS:
i have nothing special in my css. just plain css like this:
.div_example{
width: 100px;
}
@media (min-width: 768px){
.div_example{
width: 300px;
}
}
有人遇到过这个问题吗?
Has anyone encountered this problem?
推荐答案
发生了这种确切的事情.就像您一样，如果调整窗口大小，媒体查询似乎会启动.很难调试，因为打开停靠在窗口上的开发人员控制台也会导致调整大小，并且一切看起来都很好.将开发者控制台切换到单独的窗口后，我可以在DOM资源管理器中看到没有应用媒体查询.
Had this exact thing occur. Just like you, if the window was resized the media queries would seemingly kick in. Was difficult to debug because opening up the developer console docked to the window also caused a resize and everything looked fine. Upon switching the developer console to a separate window I could see in the DOM explorer that the media queries were not applying.
最终，我找到了媒体查询，该媒体查询位于主体而不是头部的样式块内.将样式块重新放置到头部可以使IE11正确地应用媒体查询.
Eventually I tracked it down to the media queries being inside of a style block that was in the body instead of the head. Relocating the style block to the head made IE11 correctly apply the media queries.
样式( < body>中的< style>标记以及其他HTML )，因此不足为奇也就不足为奇了.
style in the body was not supported in IE11 (Using <style> tags in the <body> with other HTML) so it is not surprising there would be some weirdness.
这篇关于IE11不应用媒体查询样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
