IE9在使用非外部CSS加载时加载了错误的媒体查询信息 [英] IE9 loads wrong media query info on load with non-external CSS

问题描述

我有一个页面在<style>标记中使用非外部CSS，在这些<style>标记中是以下媒体查询:

@media screen and (max-width:768px){
/* CSS */
}

在Firefox，宽度为768px的CSS和仅在应有的情况下渲染的CSS上，一切都可以正常工作.但是，在IE9中，无论大小如何，此媒体查询中的CSS都会在加载时呈现.

但是，在加载之后，如果我完全更改了浏览器的大小，它将按原样重新呈现为桌面版本.因此，基本上，无论是否在不匹配的媒体查询中，IE9非外部样式表似乎都在渲染所有CSS，但是如果调整了浏览器的大小(甚至是像素)，则渲染正确的CSS.

有人知道这到底是怎么回事，还是有快速解决方案?我唯一能想到的解决方案是通过重新排序CSS并添加新的媒体查询来解决该问题，为了简化代码更新，我希望避免这种情况.

解决方案

我在ie10中的外部CSS文件中也遇到了类似的问题. 我通过为查询提供至少1像素(0像素似乎无效)来解决该问题.

它不能解决我的所有问题，但对您来说可能就足够了.

@media screen and (min-width: 1px) and (max-width:768px){
/* CSS */
}

I have a page which uses non-external CSS in the <style> tags, and in those <style> tags is the following media query:

@media screen and (max-width:768px){
/* CSS */
}

All is working fine in Firefox, the CSS for 768px width and under only renders when it should. However, in IE9, the CSS inside this media query is rendered on load no matter what the size is.

After it loads however, if I change the browser size at all, it rerenders as the desktop version, as it should. So basically, IE9 non-external stylesheet seems to be rendering all CSS, whether it's in a media query for which it doesn't match or not, but then rendering the correct CSS if the browser is resized, even by a pixel.

Does anyone know what exactly is going on with this, or if there's a quick fix? The only solutions I've been able to think of would be working around the issue by reordering my CSS, and adding a new media query, which I'd like to avoid for the ease of updating code.

解决方案

I had a similar problem with an external css file in ie10. I sort of fixed it by giving the query a minimum of 1px (0px doesn't seem to work).

It doesn't solve all my problems, but it may be enough for yours.

@media screen and (min-width: 1px) and (max-width:768px){
/* CSS */
}

这篇关于IE9在使用非外部CSS加载时加载了错误的媒体查询信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！