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 也是一个好主意，这样就几乎不可能漏掉此类错误。