【问题标题】:CSS media query not working in IE 9CSS 媒体查询在 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 中根本不起作用。可能是什么问题?

【问题讨论】:

    标签: css internet-explorer media-queries


    【解决方案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)以及最广泛的网络浏览器:&lt;!DOCTYPE html&gt;

    【讨论】:

      【解决方案4】:

      使用以下条件

      @media only screen (min-width: 1px) and (max-width:599px)
      

      而不是

      @media only screen (max-width:599px) 
      

      并确保 min-width1px,因为 IE9 不会拾取 0px

      【讨论】:

        猜你喜欢
        • 2015-02-02
        • 2019-11-03
        • 2013-05-30
        • 1970-01-01
        • 2021-12-08
        • 1970-01-01
        • 2023-03-09
        • 1970-01-01
        • 2013-12-31
        相关资源
        最近更新 更多