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 仅在应有的时候呈现.但是，在 IE9 中，无论大小如何，此媒体查询中的 CSS 都会在加载时呈现.

然而，在它加载之后，如果我完全改变浏览器的大小，它会重新呈现为桌面版本，这是应该的.所以基本上，IE9 非外部样式表似乎正在呈现所有 CSS，无论它是否在不匹配的媒体查询中，但是如果浏览器调整大小，即使是一个像素，也会呈现正确的 CSS.

有谁知道这到底是怎么回事，或者是否有快速解决方案?我能想到的唯一解决方案是通过重新排序我的 CSS 来解决这个问题，并添加一个新的媒体查询，为了便于更新代码，我想避免这样做.

解决方案

我在 ie10 的外部 css 文件中遇到了类似的问题.我通过给查询至少 1px(0px 似乎不起作用)来修复它.

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

@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屋！