CSS 媒体查询在 IE 9 中不起作用
Posted
技术标签:
【中文标题】CSS 媒体查询在 IE 9 中不起作用【英文标题】：CSS media query not working in IE 9 【发布时间】：2011-10-18 13:26:07 【问题描述】：我在设计中包含了一些媒体查询，以根据浏览器的宽度更改页面某些元素的宽度。查询如下所示：
@media screen and (min-width:1024px)
@media screen and (max-width:1024px)
Chrome、Safari 和 Firefox 运行良好，只有 IE 是个问题。我知道 IE 9 之前的所有版本都不支持此功能，但它们在 IE 9 中根本不起作用。可能是什么问题？
【问题讨论】：
【参考方案1】：您是否打开了兼容模式？
【讨论】：
兼容模式已开启。关闭它解决了这个问题。非常感谢。 谢谢，这也解决了我的问题......我想我会提一下，以防它帮助其他人，在我的 IE9 上的“兼容性视图设置”下，它有“在兼容性视图中显示 Intranet 站点”选项打勾，这似乎是默认的？？？这影响了从我的 WAMP 服务器提供的网站 兼容模式是 IE9 的默认模式吗？【参考方案2】：不幸的是，任何版本的 IE 都不支持 min-width。所以如果你使用这个约定：
<!--- CSS Selector :: Desktop --->
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width:960px)" label="desktop">
<!--- CSS Selector :: Tablet PC --->
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:959px)" label="tablet">
<!--- CSS Selector :: Phone --->
<link rel="stylesheet" type="text/css" href="css/phone.css" media="screen and (min-width:320px) and (max-width:499px)" label="phone">
它会全部忽略。
Reference.
【讨论】：
如果您提供解决方法会很有帮助。根据您的“参考”链接，IE 7-9 都支持min-width。【参考方案3】：
确保您有正确的 DOCTYPE 声明。
强烈建议网站使用 html5 文档类型，以支持最广泛的既定标准和新兴标准（在本例中：CSS3）以及最广泛的网络浏览器：<!DOCTYPE html>
【讨论】：
【参考方案4】：使用以下条件
@media only screen (min-width: 1px) and (max-width:599px)
而不是
@media only screen (max-width:599px)
并确保 min-width 是 1px，因为 IE9 不会拾取 0px
【讨论】：
以上是关于CSS 媒体查询在 IE 9 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章