Joh*_*sen 19 css mobile-website internet-explorer-9 media-queries
我有一个奇怪的问题,只有IE9才会出现.我正在开发一个具有桌面布局和移动布局的网页.相同的HTML,不同的CSS.下面的代码会出现问题:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)
除IE9外,所有浏览器都会根据需要显示桌面网站.移动浏览器正确显示移动布局.IE9的问题在于它还显示了移动布局.
现在,如果我从上面的代码中删除"only"和"screen"这两个词,那么IE9会正确显示桌面站点.问题是,移动浏览器也会显示桌面网站.我对此做了一些研究,并没有在这个问题上看到任何东西.
谢谢阅读,
约翰
Sco*_*ord 32
以防万一有人为了回答这个问题而抓取SO,上面两个答案都没有解决这里回答的核心问题 - CSS媒体查询无法在IE 9中运行
基本上内联CSS3媒体查询可以在IE9中工作,但你必须禁用Compatibilty模式 -
<meta http-equiv="X-UA-Compatible" content="IE=9">
上面的元标记需要放在任何其他元标记之前,否则IE9将默认为兼容模式,随后将无效.
从我所知,它归结为IE9不解释"min-device-width"和"max-device-width".
根据http://msdn.microsoft.com/library/ms530813.aspx,它不支持这些属性,只支持"min-width"和"max-width".
此外,http://www.w3.org/TR/css3-mediaqueries/#error-handling声明浏览器应该忽略它无法识别的属性.似乎IE9不是这样.
小智 5
是的,使用@media (max-width: 860px) 而不是max-device-width.
IE 9只是让我心脏病发作.项目媒体查询无效.
然后经过几分钟的谷歌搜索后,你必须在HTML中包含CSS.仅限内联样式!
这些IE浏览器有多么拖累!