css - IE 10 加载错误的媒体查询

Question

为什么媒体查询仅在以下主页的 Internet Explorer 10 中加载最小尺寸的文本：

http://www.jussbuss.tv/testing/kpat

媒体查询如下：

@media only screen and (min-width:320px) {
    #masthead_home a.logoa_home {
        font-size:1.0em;
    }
    #masthead_home a.logob_home {
        font-size:0.5em;
    }

@media only screen and (min-width:480px) {
    #masthead_home a.logoa_home {
        font-size:2.0em;
    }
    #masthead_home a.logob_home {
        font-size:1.0em;
    }
}

@media only screen and (min-width:768px) {
    #masthead_home a.logoa_home {
        font-size:4.0em;
    }
    #masthead_home a.logob_home {
        font-size:2em;
    }
}

@media only screen and (min-width:1024px) {
    #masthead_home a.logoa_home {
        font-size:5.0em;
    }
    #masthead_home a.logob_home {
        font-size:3.0em;
    }
}

@media only screen and (min-width:1140px) {
    #masthead_home a.logoa_home {
        font-size:8.0em;
    }
    #masthead_home a.logob_home {
        font-size:4em;
    }
}

@media only screen and (min-width:1280px) {
    #masthead_home a.logoa_home {
        font-size:10.0em;
    }
    #masthead_home a.logob_home {
        font-size:5.0em;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
       only screen and (min-resolution:144dpi) {
    #masthead_home a.logoa_home {
        font-size:10.0em;
    }
    #masthead_home a.logob_home {
        font-size:5.0em;
    }
}

Answer 1

您错过了}第一条媒体规则的结束。这会导致以下媒体规则被视为嵌套，IE10 不支持，因此其他媒体规则被丢弃，只留下第一个被应用的媒体规则。

您应该习惯使用正确的格式，这样更容易发现此类错误。使用支持语法验证的适当 IDE 也是一个好主意，这样此类错误几乎不可能漏掉。